Question

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

Answer 1

您可以尝试：

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

Take a look

Answer 2

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

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

2 个答案: