フレックスアラインメントアイテムがオーバーフローオーバーフローから自動停止する

フレックスボックスを使用して、ページの中央にあるコンテンツを作成しています。ただし、テキストがオーバーフローした場合は、overflow-x: autoを使用してスクロールバーを作成してください。フレックスアラインメントアイテムがオーバーフローオーバーフローから自動停止する

明らかに、これは機能していないと私はしばらくの間私の机の上に頭を打ってきた。私はここで単純なものを欠いている必要がありますが、私の人生のためにこれを理解することはできません。

スニペットでは、最初のボックスは、フレックスボックスが破損していることを除いて、2番目のものが本当に好きなものです。

.flex-container{ 
 
     height: 100%; 
 
     display: flex; 
 
     flex-direction: column; 
 
     justify-content: center; 
 
     align-items: center; 
 
     margin-top: 20px; 
 
    } 
 
    
 
.scrollable-content{ 
 
    overflow-x: auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="scrollable-content"> 
 
     <div style="background-color: red;width: 700px;height: 50px">I might be too wide on small screens, but you have a scrollbar if I am!</div> 
 
    </div> 
 
    
 
    <div class="flex-container"> 
 
     <div class="scrollable-content"> 
 
     <div style="background-color: red;width: 700px;height: 50px">I might be too wide on small screens, but you have a scrollbar if I am!</div> 
 
    </div> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2017-06-20 Pharylon

一般に、スクロールするoverflow: auto有する要素については、幅（または高さ）を必要とします。

通常のブロック要素はデフォルトの幅（100％）を持ち、デフォルトでスクロールしますが、フレックス項目はコンテンツに合わせて調整されません。この場合

フレックス方向がcolumnあるとき、あなたはmax-width: 100%（またはwidth: 100%）を追加する必要がscrollable-content

.flex-container{ 
 
     height: 100%; 
 
     display: flex; 
 
     flex-direction: column; 
 
     justify-content: center; 
 
     align-items: center; 
 
     margin-top: 20px; 
 
    } 
 
    
 
.scrollable-content{ 
 
    max-width: 100%; 
 
    overflow-x: auto; 
 
}

<div class="flex-container"> 
 
     <div class="scrollable-content"> 
 
     <div style="background-color: red;width: 300px;height: 50px">I'm small and centered</div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="flex-container"> 
 
     <div class="scrollable-content"> 
 
     <div style="background-color: red;width: 700px;height: 50px">I might be too wide on small screens, but you have a scrollbar if I am!</div> 
 
     </div> 
 
    </div>

出典

2017-06-20 19:55:14 LGSon

に私はそれは、単純な何かを知っていました！ありがとう！ – Pharylon

フレックスアラインメントアイテムがオーバーフローオーバーフローから自動停止する

答えて

関連する問題