为什么这个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上被忽略？

回答

相关问题