如何正确嵌套Flexbox？右侧子Flex容器无法铺满宽度问题

我想要实现左右两栏垂直平分屏幕的布局，目前已完成左右分栏且右侧内容垂直居中，但右侧嵌套的Flex容器（row2）无法铺满右侧栏宽度，设置justify-content: space-between后，内部4个column2元素挤在左侧而非均匀分布，怀疑是row2未获取足够宽度导致，请问该如何修复？

现有代码 #

CSS代码

html {
  height: 100%;
}

body {
  height: 100%;
}

.row {
  display: flex;
  height: 100%;
}

.column {
  flex-basis: 50%;
  box-sizing: border-box;
  
  border: 1px black solid;
}

.row2 {
  display: flex;
  justify-content: space-between;
  border: 1px black solid;
}

.column2 {
  box-sizing: border-box;
  border: 1px black solid;
}

.content {
  display: flex;
  align-items: center;
}

HTML代码

<div class="row">
  <div class="column">
      test title
  </div>

  <div class="column content">
    <div class="row2">
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
    </div>
  </div>
</div>

修复方案 #

问题根源在于：

1. .content作为Flex父容器.row的子元素，默认宽度仅由内部内容决定，没有占满分配的50%宽度
2. .row2继承了.content的宽度限制，无法铺满右侧栏

只需两步修改：

• 给.content添加width: 100%，强制它占满父容器分配的全部宽度
• 给.row2添加width: 100%，确保它铺满.content的宽度，让justify-content: space-between生效

修改后的完整代码 #

CSS代码

html {
  height: 100%;
}

body {
  height: 100%;
}

.row {
  display: flex;
  height: 100%;
}

.column {
  flex-basis: 50%;
  box-sizing: border-box;
  
  border: 1px black solid;
}

.row2 {
  display: flex;
  justify-content: space-between;
  border: 1px black solid;
  width: 100%; /* 新增 */
}

.column2 {
  box-sizing: border-box;
  border: 1px black solid;
}

.content {
  display: flex;
  align-items: center;
  width: 100%; /* 新增 */
}

HTML代码

<div class="row">
  <div class="column">
      test title
  </div>

  <div class="column content">
    <div class="row2">
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
    </div>
  </div>
</div>

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