如何实现首列自适应最宽内容的双栏布局（Flexbox/Table/Grid方案）

我想用CSS Flexbox创建双栏表格布局，要求第一列尽可能窄，且所有单元格统一为该列最宽单元格的宽度，第二列占据剩余宽度。目前的Flexbox方案存在首列单元格宽度不一致的问题，想咨询：

• 是否可通过Flexbox实现需求？
• 若不行，能否用无JavaScript的Table实现？
• 再不行的话，CSS Grid能否实现及具体方法？

一、Flexbox方案可行性 #

不行。Flexbox的每一行都是独立的弹性容器，行内的flex项宽度仅由当前行的内容和布局规则决定，无法跨行列同步宽度。你当前的代码中，每个.ROW都是独立的flex容器，所以.C1的宽度只会适配自身内容，无法统一成整列最宽单元格的宽度——这是Flexbox的布局特性决定的。

二、无JS的Table实现方案 #

完全可以，这是表格的原生特性，实现最简单：

HTML代码 #

<table class="conv">
  <tr class="row">
    <td class="c1">HI</td>
    <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
  <tr class="row">
    <td class="c1">FOOBAR</td>
    <td class="c2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</td>
  </tr>
  <tr class="row">
    <td class="c1">LAST</td>
    <td class="c2">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
  </tr>
</table>

CSS代码 #

table.conv {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
  background-color: #888;
}
tr.row {
  background-color: #ff0;
}
td.c1 {
  background-color: #800;
  white-space: nowrap; /* 确保内容不换行，让列宽仅适配最宽内容 */
  vertical-align: top; /* 顶部对齐，和原Flexbox效果一致 */
}
td.c2 {
  background-color: #080;
  width: 100%; /* 自动填充剩余宽度 */
}

原理：表格列宽会自动统一为该列最宽单元格的宽度，white-space: nowrap保证第一列内容不换行，实现“尽可能窄”的要求；第二列设置width: 100%会自动填充剩余空间。

三、CSS Grid实现方案 #

可以实现，且比Flexbox更适合这种行列对齐场景：

HTML代码（和你原结构一致，无需修改） #

<div class="conv">
  <div class="row">
    <div class="c1">HI</div>
    <div class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="row">
    <div class="c1">FOOBAR</div>
    <div class="c2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
  </div>
  <div class="row">
    <div class="c1">LAST</div>
    <div class="c2">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
  </div>
</div>

CSS代码 #

div.conv {
  display: grid;
  grid-template-columns: min-content 1fr; /* 第一列取最小必要宽度，第二列填充剩余空间 */
  gap: 6px; /* 列间距，替代原margin-right */
  background-color: #888;
  padding: 6px 0; /* 替代原row的上下margin */
}
div.row {
  display: contents; /* 让row的子元素直接成为grid子项，实现行列对齐 */
}
div.c1 {
  background-color: #800;
  align-self: start; /* 顶部对齐 */
  margin: 6px 0; /* 保留原row的上下间距 */
}
div.c2 {
  background-color: #080;
  margin: 6px 0; /* 保留原row的上下间距 */
}

原理：grid-template-columns: min-content 1fr定义两列，min-content自动取该列所有单元格中最宽的内容宽度作为列宽，1fr让第二列占据剩余空间；display: contents让.row不参与布局，其内部的.c1和.c2直接成为grid容器的子项，实现跨行列的宽度统一。

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