如果“flex-grow：1”项目的内容较大，则防止其增长

Question

我正在开发一个包含以下标记和样式的布局（现场演示https://codepen.io/IljaDaderko/pen/MWwLgVr）这一切都运行良好，我的页眉和页脚具有固定高度，内容区域自动扩展以填充其余部分的空间。

在内容区域内，我有一个 div 填充其所有父空间并添加overflow-x: scroll. Content <br />我最初的假设是，如果我在其中添加一堆内容，我仍然会看到页脚并能够向下滚动，但它会不断扩大内容区域（请参阅现场演示＃2 https://codepen.io/IljaDaderko/pen /MWwLgBQ）。

是否可以将该页脚保留在底部（而不将其固定），同时使内容区域自动扩展并利用滚动容器？保留滚动容器的原因是它将成为我使用的框架中可重用的组件。

CSS

.container {

  width: 100vw;

  height: 100vh;

  background: pink;

  display: flex;

  flex-direction: column;

}

.header {

  background: magenta;

  height: 50px;

}

.content {

  flex-grow: 1;

}

.footer {

  background: lightgreen;

  height: 30px;

}

.scroll {

  height: 100%;

  width: 100%;

  overflow-x: scroll;

}

超文本标记语言

<div class="container">

  <div class="header">Header</div>

  <div class="content">

    <div class="scroll">

      Content

    </div>

  </div>

  <div class="footer">Footer</div>

</div>

Answer 1

你做得很好，只需要稍微改变一下你的CSS。进行以下更改：overflow从滚动类中删除属性添加overflow: scroll到内容类在代码中：.content {&nbsp; flex-grow: 1;&nbsp; overflow: scroll;}.scroll {&nbsp; height: 100%;&nbsp; width: 100%;}无论您向滚动 div 添加多少内容，您现在都应该获得滚动内容。