html - 连续弯曲，但让元素填充父级的高度

Question

我有一个看起来像这样的布局：

<div style="display: flex; flex-direction: row;height:100%;">
  <div style="width:250px"></div>
  <div style="flex:1;height:100%"></div>
</div>

第二个内部 div 垂直增长，所以我需要该 div 滚动（但不是左内部 div）。这在 Firefox 上效果很好，但在 Chrome 上，第二个内部 div 会包裹到内容的高度并在屏幕外不断增长。据我所知，这是因为在 Chrome 中，高度 100% 仅在父级具有定义的高度时才有效。

如何使第二个内部 div flex 填充宽度并匹配父级的高度？

标签： htmlcssflexbox

Answer 1

.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.container > div:first-child {
  flex: 0 0 250px;
  align-self: flex-start;
  background-color: aqua;
}

.container > div:last-child {
  flex: 1;
  overflow: auto;
  background-color: pink;
}

body {
  margin: 0;
}

<div class="container">
  <div>Item One</div>
  <div>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>
  </div>
</div>