爲什麼這個overflow屬性在嵌套div上被忽略？

在下面的例子中，我期望content div可滾動，但該屬性被忽略，爲什麼是這樣以及如何修復它？爲什麼這個overflow屬性在嵌套div上被忽略？

我知道，如果我從外部div刪除overflow-y屬性，那麼整個頁面將垂直滾動，但我希望/期望單個列滾動。從邊界看來，他們應該這樣做。

這可能是由於我不知道一些與Flexbox相關的奇怪行爲，但我無法弄清楚它可能是什麼？

<html> 
<head> 
<style type='text/css'> 
.columns { 
    display: flex; 
    flex-flow: row nowrap; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    height: 100vh; 
    border: 1px solid #00ff00; 
} 

.column { 
    flex: 0 0 320px; 
    border: 1px solid #008800; 
} 

.header h4 { 
    margin: 3px 0; 
} 

.content { 
    overflow-y: auto; 
    border: 1px solid blue; 
} 

.mention { 
    background: rgba(147, 128, 108, .1); 
    height: 200px; 
    border: 1px solid red; 
} 
</style> 
</head> 
<body> 
<div class='columns'> 
    <div class='column'> 
    <div class='header'><h4>Header</h2></div> 
    <div class='content'> 
     <div class='mention'>Lorem ipsum...</div> 
     <div class='mention'>Lorem ipsum...</div> 
     <div class='mention'>Lorem ipsum...</div> 
     <div class='mention'>Lorem ipsum...</div> 
     <div class='mention'>Lorem ipsum...</div> 
     <div class='mention'>Lorem ipsum...</div> 
    </div> 
    </div> 
    <div class='column'> 
    <div class='header'><h4>Header</h2></div> 
    <div class='content'> 
     <div class='mention'>Lorem ipsum...</div> 
     <div class='mention'>Lorem ipsum...</div> 
     <div class='mention'>Lorem ipsum...</div> 
     <div class='mention'>Lorem ipsum...</div> 
    </div> 
    </div> 
</div> 
</body> 
</html>

來源

2015-07-10 Ian Phillips

這個你可以嘗試：

.content { 
    overflow-y: scroll; 
    border: 1px solid blue; 
    height:400px; 
}

Take a look

來源

2015-07-10 11:34:51 Manwal

這會工作，但內容的高度是動態的，在實際的應用程序中有'提及'元素的數量可變，他們每個人的高度也可以根據內容而有所不同。 –

添加height: 100%;到兩個column和content類的伎倆。

來源

2015-07-10 13:35:16

爲什麼這個overflow屬性在嵌套div上被忽略？

回答

相關問題