在下面的示例中,我希望content
div可以滚动但属性被忽略,为什么会这样,我该如何解决?
我知道如果我从外部overflow-y
删除div
属性,那么整个页面将垂直滚动,但我希望/期望各个列滚动。从边界看来他们应该这样做。
这可能是由于我不知道的一些奇怪的弹性盒相关行为,但我还没有能够弄清楚它可能是什么?
<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>
答案 0 :(得分:0)
答案 1 :(得分:0)
向height: 100%;
和column
类添加content
就可以了。