如何用CSS Flexbox实现Grid的max-content auto列布局效果？

要实现和你当前Grid布局相同的效果（左侧列宽度适配最宽项，右侧列占满剩余空间且内容高度自适应拉伸），用Flexbox的话需要调整HTML结构，将左右列的元素分别包裹，具体实现如下：

代码实现 #

HTML

<div class="container">
  <div class="left-column">
    <div>Heading 123</div>
    <div>Heading ABCDEF</div>
  </div>
  <div class="right-column">
    <div>Body 123</div>
    <div>Body ABCDEF</div>
  </div>
</div>

CSS

.container {
  display: flex;
  width: 100%;
}

.left-column {
  width: max-content;
  display: flex;
  flex-direction: column;
  margin-right: 1rem;
}

.right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-column > div {
  flex: 1;
}

方案说明 #

1. 外层容器使用display: flex，将左右两列横向排列
2. 左侧列通过width: max-content自动适配最宽的标题内容，确保所有左侧项宽度统一
3. 右侧列设置flex: 1，占满容器剩余空间
4. 左右列内部都用flex-direction: column让子元素垂直排列，右侧子元素设置flex: 1实现高度自适应拉伸，和左侧对应行的高度保持一致

如果不调整HTML结构，仅用Flexbox很难实现和Grid完全一致的两列布局（因为Flex是一维布局，无法像Grid那样直接定义列规则并让跨行列的宽度统一），调整结构是最简洁可靠的Flex实现方式。

内容的提问来源于stack exchange，提问作者Dominic Bou-Samra