如何保持 flexbox 与视口相同的高度（无滚动）？

Question

我在一个 flexbox (div id="content_row") 中有 3 个 div，其中 flex-direction = row 代表 3 个列表。 任何列表都不应增长，如果内容大于屏幕可以显示，则列表本身应添加滚动条，而不是整个网页。

由于这个原因，我将那个弹性盒放在另一个弹性盒中，其中 flex-direction = column 并给它一个 flex 1。我可以添加一个属性来防止这个弹性盒增长吗？

我知道我可以简单地将溢出属性添加到列表中，但过去我遇到了麻烦。总是有一个浏览器以错误的方式显示它。

#content_row{ display: flex; flex-direction: row;}
.row-item{ flex: 0.33; margin-left: 10px; margin-right: 10px;}
#content_column{ display: flex; flex-direction: column;}
#content_row_wrapper{ flex: 1;}

<div id="content_column">
 <div id="content_row_wrapper">
  <div id="content_row">
   <div class=".row-item"></div>
   <div class=".row-item"></div>
   <div class=".row-item"></div>
  </div>
 </div>
</div>

干杯

Answer 1

添加和删除文本以查看更改，如果您不希望网页上的滚动条，那么您需要隐藏 body 的溢出并将其应用于您的内容 div。现在滚动条在你的内容行上，而不是在正文上，删除数据，它就会消失。

body{
  overflow: hidden;
}
#content_row{ display: flex; flex-direction: row; overflow-y: auto;     max-height: 300px;}
.row-item{ flex: 0.33; margin-left: 10px; margin-right: 10px;}

#content_column{ display: flex; flex-direction: column;}
#content_row_wrapper{ flex: 1;}

<div id="content_column">
 <div id="content_row_wrapper">
  <div id="content_row">
   <div class="row-item">
    More content foemo purposeMore content for demo purpose More content for demo purposeMore content for demo purpose More content for demo pur for demo purposeMore content for demo purpose More content for demo purposeMore content foreMore content for demo purpose More content for demo purposeMore content for demo purpose More content for demo purposeMore content r demo purposeMore content for demo purpose More content for demo pur for demo purposeMore content for demo purpose More content for demo purposeMore content foreMore content for demo purpose More content for demo purposeMore content for demo purpose More content for demo purposeMore content for demo purposez atul
</div>
<div class="row-item">2nd Div</div>
<div class="row-item"> 3rd Div</div>
</div>
</div>
</div>