CSS：flex-grow DIV在溢出时扩展，但是一个scrollarea是needet

Question

Flex-grow div scrollarea？

我正在尝试创建一个适合视口的全屏HTML页面，而无需垂直滚动。

顶部和底部div具有固定的高度，例如200px和100px。 中间的div应该使用flex-grow动态填补我已经完成的空白。

当中心div被填满并开始溢出时，它会扩展并且页面不再适合视口。我希望中央div改为可滚动区域并保持拟合高度。

所需的布局：

.wrapper,
html,
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.top_div {
  height: 100px;
  background-color: red;
}

.bottom_div {
  height: 70px;
  background-color: yellow;
}

.center_div {
  flex-grow: 1;
  background-color: cyan;
}

h3 {
  text-align: center;
  font-family: sans-serif;
  font-size 10px;
}

<div class="wrapper">
  <div class="top_div">
    <h3>Top Div with fixed height, 100px</h3>
  </div>
  <div class="center_div">

    <div style="overflow: hidden">
      <div style="overflow: auto;">
        <!-- Scroll DIV -->
        <h3>Central DIV </h3>
        <h3>Fills the gap between top and bottom div</h3>
        <h3>Should be a scrollarea on overflow</h3>
      </div>
    </div>

  </div>
  <div class="bottom_div">
    <h3>Bottom Div with fixed height, 70px</h3>
  </div>
</div>

Answer 1

您需要指定溢出。您在这里使用的是overflow，而您需要使用overflow-y: auto。 overflow-y告诉CSS你的目标是垂直轴（向上和向下），auto说“当区域通常拉伸以腾出更多空间时，创建一个滚动条。”
HTML

<div class="wrapper">
    <div class="top_div">
        <h3>Top Div with fixed height, 100px</h3>
    </div>
    <div class="center_div">

        <div style="overflow: hidden">
            <div style="overflow: auto;">
            <!-- Scroll DIV -->
                <h3>Central DIV </h3>
                <h3>Fills the gap between top and bottom div</h3>
                <h3>Should be a scrollarea on overflow</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
        <h3>Bottom Div with fixed height, 70px</h3>
            </div>
        </div>

    </div>
    <div class="bottom_div">
        <h3>Bottom Div with fixed height, 70px</h3>
    </div>
</div>  

CSS

.wrapper, html, body{
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.top_div {
  height: 100px;
  background-color: red;
}
.bottom_div {
  height: 70px;
  background-color: yellow;
}
.center_div {
  flex-grow: 1;
  background-color: cyan;
  overflow-y: auto;
  height: 500px;
}
h3 {
  text-align: center;
  font-family: sans-serif;
  font-size 10px;
}  

这里唯一的变化就是你的.center-div，我在其中添加了overflow-y并添加了一个高度，以防止任何div根据.central-div是否有内容来改变大小。

https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Answer 2

为flex-basis: 0指定min-height: 0和center_div（默认值为auto），因为默认情况下不允许弹性项占用的内容少于其内容。这将使您的块缩小。

还需要添加overflow-y: auto，以便在需要时将滚动条添加到center_div。

您可以从标记中删除一些冗余块。演示：

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.top_div {
  height: 100px;
  background-color: red;
}
  
.bottom_div {
  height: 70px;
  background-color: yellow;
}

.center_div {
  flex-grow: 1;
  flex-basis: 0; /* new */
  min-height: 0; /* new */
  overflow-y: auto; /* new */
  background-color: cyan;
}

h3 {
  text-align: center;
  font-family: sans-serif;
  font-size 10px;
}

<div class="top_div">
  <h3>Top Div with fixed height, 100px</h3>
</div>
<div class="center_div">
  <!-- Scroll DIV -->
  <h3>Central DIV </h3>
  <h3>Fills the gap between top and bottom div</h3>
  <h3>Should be a scrollarea on overflow</h3>
</div>
<div class="bottom_div">
  <h3>Bottom Div with fixed height, 70px</h3>
</div>

另外，请考虑将min-height更改为0以上的内容，以防止当身高非常低时center_div消失。