Flex Grid未正常自适应：布局截断问题与适配需求

问题原因 #

1. 高度继承失效：page-content作为最外层flex容器，没有设置高度，而content-row设置的height:100%在CSS中需要父元素有明确高度值才能生效，否则等同于auto（由内容撑开）。当内容较少时，content-row高度不足，inner-wrapper的height:100%也跟着失效，内容溢出时就会出现截断或超出父容器的情况。
2. flex空间分配未配置：page-content是垂直flex布局，但没有给子元素content-row设置flex-grow:1，导致两行无法自动平分父容器的可用高度；另外inner-wrapper用固定width:30%控制列宽，没有利用flex的空间分配特性，新增元素时无法自动调整间距。

修复方案 #

要实现两行各占50%高度、三列各占约33%宽度、新增元素自动调整间距的布局，且不使用vh/vw单位，关键调整如下：

• 给html、body和page-content设置height:100%，建立完整的高度继承链，让最外层容器占满视口高度；
• 给content-row添加flex:1，让两行自动平分page-content的高度；
• 把inner-wrapper的固定宽度改成flex:1，配合content-row的flex布局实现三列平分宽度，新增列时自动调整；
• 用gap属性控制行/列间距，替代justify-content:space-around，让间距控制更直观；
• 修正内部内容块的布局，确保内容能正确撑开且不溢出。

修改后的代码 #

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* 让根元素占满视口高度 */
  background-color: red;
}

/* 最外层容器：垂直flex，占满父元素高度 */
.page-content {
  display: flex;
  flex-direction: column;
  height: 100%; /* 继承body的100%高度 */
  background-color: green;
  gap: 0; /* 行间距，可按需调整 */
}

/* 行容器：水平flex，平分page-content的高度 */
.content-row {
  display: flex;
  flex: 1; /* 自动平分垂直空间，两行各占50% */
  background-color: yellow;
  gap: 2%; /* 列间距，新增元素时自动调整 */
  padding: 0 1%; /* 左右留白，避免内容贴边 */
}

/* 列容器：平分行的水平空间 */
.inner-wrapper {
  background-color: pink;
  flex: 1; /* 自动平分水平空间，三列各占约33% */
  display: flex;
  flex-direction: column; /* 让内部内容垂直排列 */
}

/* 内部内容块：自动撑开高度 */
.content {
  padding: 5%;
  background-color: blue;
  flex: 1; /* 让文本块撑开剩余空间 */
  margin: 0; /* 去掉默认margin避免间距混乱 */
}

HTML

<div class="page-content">
  <div class="content-row">
    <div class="inner-wrapper">
      <h3 class="content">HEADER</h3>
      <p class="content">inner text1.inner text1.inner text1.inner text1.inner text1.</p>
    </div>
    <div class="inner-wrapper">
      <h3 class="content">HEADER</h3>
      <p class="content">inner text2.inner text2.inner text2.</p>
    </div>
    <div class="inner-wrapper">
      <h3 class="content">HEADER</h3>
      <p class="content">inner text3.inner text3.inner text3.</p>
    </div>
  </div>
  <div class="content-row">
    <div class="inner-wrapper">
      <h3 class="content">HEADER</h3>
      <p class="content">inner text4.inner text4.inner text4.</p>
    </div>
    <div class="inner-wrapper">
      <h3 class="content">HEADER</h3>
      <p class="content">inner text5.inner text5.inner text5.inner text5.inner text5.inner text5.</p>
    </div>
    <div class="inner-wrapper">
      <h3 class="content">HEADER</h3>
      <p class="content">inner text6.inner text6.inner text6.</p>
    </div>
  </div>
</div>

关键修改说明 #

• html, body, .page-content设置height:100%：建立完整的高度继承链，让最外层容器占满视口，无需vh单位；
• .content-row的flex:1：让两行自动平分page-content的高度，实现每行50%的垂直占比；
• .inner-wrapper的flex:1：让每个列自动平分所在行的宽度，新增列时会自动调整每列宽度，配合gap属性控制间距；
• .inner-wrapper添加flex-direction:column+.content的flex:1：让内部标题和文本垂直排列，文本块自动撑开剩余空间，避免内容截断；
• 用gap替代justify-content:space-around：更直观地控制行/列间距，避免内容过少时出现过大空白。

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