Flexbox布局中内容溢出撑开Div的解决方法咨询

问题描述 #

我正在为一款应用做样式设计，已制作了一个布局原型，目前布局基本符合预期，但当绿色div内内容过多时（可取消注释p标签测试），会导致所有div尺寸被撑开。我希望保持各div尺寸不变，仅让绿色div内内容可滚动，请问该如何修复？

HTML代码 #

<ul>
   <li><a>Solve</a></li>
   <li><a>About</a></li>
   <li><a>Other</a></li>
</ul>

<div class="yellow">
  
  <div class="blue">
    <div class="darkgrey">
      This is the top left half
    </div>
    <div class="lightgrey">
      This is the top right half
    </div>
  </div>
  
  <div class="red">
    <div class="green">
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
<!--       <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p> -->

    </div>
  </div>
  
</div>

原始CSS代码 #

body {
  margin: 0;
  padding: 10px;
  background-color: white;
  
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.yellow {
  background-color: yellow;
  padding: 10px;
  
  flex: 1; /* should occupy the entire screen except the navbar */
  display: flex; /* should create flex for blue and red */
  flex-direction: column;
}

.blue {
  background-color: blue;
  flex: 2; /* should take up 2/3rds of yellow */
  display: flex; /* should create flex for the top left and top right halves */
  min-height: 240px;
  padding: 10px;
}

.red {
  background-color: red;
  padding: 15px;
  
  flex: 1; /* should take up 1/3rd of yellow */
  display: flex; /* should create flex for green, so that green can expand to fill it */
  flex-direction: column;
  min-height: 120px;
  
}

.green {
  background-color: green;
  overflow: scroll;
  
  flex: 1; /* should fill the entire red */
}

.darkgrey {
  background-color: darkgrey;
  flex: 1; /* will fill half the width of blue */
}

.lightgrey {
  background-color: lightgrey;
  flex: 1; /* will fill half the width of blue */
}

/*  navbar stuff */
ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  box-sizing: border-box;
}

/*  navbar stuff */
li a {
  display: block;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
}

解决方案 #

核心问题是Flex容器默认不会限制子元素的内容高度，导致内容溢出时逐层撑开父容器。只需给上层Flex容器添加overflow: hidden，并优化绿色容器的滚动设置即可：

修改后的关键CSS代码 #

.yellow {
  background-color: yellow;
  padding: 10px;
  
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 强制容器保持设定尺寸，不被内容撑开 */
}

.blue {
  background-color: blue;
  flex: 2;
  display: flex;
  min-height: 240px;
  padding: 10px;
  overflow: hidden; /* 同上 */
}

.red {
  background-color: red;
  padding: 15px;
  
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  overflow: hidden; /* 同上 */
}

.green {
  background-color: green;
  overflow: auto; /* 仅内容溢出时显示滚动条，体验更优 */
  
  flex: 1;
}

原理说明 #

• 给.yellow、.blue、.red添加overflow: hidden，可以强制这些Flex容器维持自身的尺寸（由flex比例和min-height定义），不会被内部溢出的内容撑开。
• 将.green的overflow: scroll改为overflow: auto，当内容未超过容器高度时不会显示多余的滚动条，提升视觉体验。

内容的提问来源于stack exchange，提问作者713sean