如何实现两单元格宽度匹配最宽列且居中（无需JavaScript）

当然可以不用JavaScript搞定这个需求！我们只需要调整一下Flexbox的属性设置就能完美实现你的要求，修改后的代码如下：

修改后的CSS #

body { background-color: lime; }
.container { margin: 20px; }
.fb { display: flex; justify-content: center; }
.fb-container { 
  display: inline-flex; /* 让容器宽度由内容决定，而非撑满父容器 */
  align-items: center; 
  background-color: #fff; 
  border: solid 0.1rem rgba(0,0,0,.12); 
}
.fb-item { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex: 1; /* 让两个子项平分容器宽度 */
  min-width: max-content; /* 强制子项宽度不小于自身内容的最大宽度 */
  color: rgba(0,0,0, .87); 
  font-size: 14px; 
  height: 46px; 
  padding: 0 16px; 
}
.fb-item:not(:first-child) { border-left: solid 1px rgba(0,0,0,.12); }

对应的HTML（无需改动） #

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much longer</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

关键改动说明 #

• 调整fb-container的显示方式：去掉原来的flex:1，改用inline-flex。这样容器不会强行撑满父容器的可用宽度，而是根据子元素的实际宽度收缩，配合外层.fb的justify-content: center，就能轻松实现内部容器的居中效果。
• 给fb-item添加最小宽度限制：min-width: max-content会让每个单元格的最小宽度等于自身内容的宽度。再加上flex:1，两个单元格会平分容器的总宽度——由于最宽单元格的内容宽度是两者的最大值，最终两个单元格都会自动扩展到这个最大宽度，实现等宽的要求。

这样就完美解决了你遇到的两个问题：单元格既保持等宽且宽度等于最宽元素的宽度，内部容器也能居中且宽度刚好是最宽单元格的两倍，全程不需要任何JavaScript代码。

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