时间戳

首页 > 解决方案 > 如果“flex-grow: 1”项目的内容更大，则阻止它增长

html - 如果“flex-grow: 1”项目的内容更大，则阻止它增长

问题描述

我正在处理一个包含以下标记和样式的布局（现场演示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;
}

HTML

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="scroll">
      Content
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

标签： htmlcss

解决方案

你做得很好，只需要稍微改变你的CSS。

进行以下更改：

  1. overflow从滚动类中删除属性
  2. 添加overflow: scroll到内容类

在代码中：

.content {
  flex-grow: 1;
  overflow: scroll;
}

.scroll {
  height: 100%;
  width: 100%;
}

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

推荐阅读