垂直Flexbox列布局元素重叠问题的解决方案咨询

问题描述 #

我设计了一个单列CSS布局，列内每个元素为<section>标签，配置了min-height: 60vh。将整体布局设置为flex-direction: column的Flexbox后，当<section>的内容在足够小的屏幕上垂直高度超过60vh时，元素会发生重叠——它们的高度被固定在60vh，无法自适应内容高度。

最小复现代码 #

HTML代码 #

<div class="container">
  <section>
    <div class="box">
      some content
    </div>
  </section>
  <section>
    <div class="box">
      some content
    </div>
  </section>
  <section>
    <div class="box">
      some content
    </div>
  </section>
</div>

CSS代码 #

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-y: scroll;
}

section {
  min-height: 60vh;
  --grad-col: red;
}

section:nth-child(1) {
  --grad-col: red;
}
section:nth-child(2) {
  --grad-col: blue;
}
section:nth-child(3) {
  --grad-col: orange;
}

.box {
  height: 150px;
  margin: 10px;
  background-color: color-mix(in srgb, transparent 50%, var(--grad-col));
}

解决方案 #

在不改变Flex布局的前提下，只需给<section>元素添加flex-shrink: 0属性：

section {
  min-height: 60vh;
  --grad-col: red;
  flex-shrink: 0; /* 添加这一行 */
}

原理说明 #

Flex容器的子元素默认flex-shrink: 1，即当容器空间不足时，子元素会被自动压缩。添加flex-shrink: 0可以禁止<section>被压缩，同时保留min-height: 60vh的最小高度规则：

• 当内容高度小于60vh时，<section>保持60vh高度；
• 当内容高度超过60vh时，<section>会自动撑开以适应内容，避免元素重叠。

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