为什么在嵌套的div上忽略这个溢出属性?

时间:2015-07-10 11:28:09

标签: css

在下面的示例中,我希望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>

2 个答案:

答案 0 :(得分:0)

您可以尝试:

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

Take a look

答案 1 :(得分:0)

height: 100%;column类添加content就可以了。