停止彈出對齊項從打破溢出自動

我正在使用Flexboxes創建以頁面爲中心的內容。但是，如果文本溢出，我希望它有一個滾動條使用overflow-x: auto。停止彈出對齊項從打破溢出自動

很明顯，這不起作用，我一直在頭撞我的桌子一陣子。我必須在這裏錯過簡單的東西，但我不能爲了我的生活而弄清楚這一點。

在代碼片段中，第一個盒子是我真正喜歡的第二個盒子，除了Flexbox打破它。

.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

停止彈出對齊項從打破溢出自動

回答

相關問題