如果“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。

进行以下更改：

1. overflow从滚动类中删除属性

2. 添加overflow: scroll到内容类

在代码中：

.content {

  flex-grow: 1;

  overflow: scroll;

}

.scroll {

  height: 100%;

  width: 100%;

}

无论您向滚动 div 添加多少内容，您现在都应该获得滚动内容。