如何将Flexbox父容器宽度限制为首个子元素宽度并实现指定布局？

需求：

• 顶部行宽度由自身内容决定（非固定CSS数值）
• 底部行的两个元素需扩展至与顶部行完全等宽

预期布局效果：

---------------------------------
| row one is exactly this wide  |
---------------------------------
| [...thing1...] [...thing2...] |
---------------------------------

现有代码：

<div class="parent" style='display: flex; flex-direction: column'>
  <div class="row1">row 1 is exactly this wide</div>
  <div class="row2" style='flex: 1; display: flex'>
    <span style='flex: 1'>thing1</span>
    <span style='flex: 1'>thing2</span>
  </div>
</div>

遇到的问题：
底部行的thing1和thing2会撑满祖父容器的宽度，而非顶部行的宽度，实际效果如下：

----------------------------------------------------------------------
| row one is exactly this wide                                       |
----------------------------------------------------------------------
| [..........thing1.............] [............thing2..............] |
----------------------------------------------------------------------

解决方案 #

核心是让父容器.parent的宽度收缩至顶部行.row1的内容宽度，而非占满可用空间。有两种简单的实现方式：

方式1：将父容器改为行内Flex容器 #

把.parent的display属性从flex改为inline-flex，容器会自动适配子元素的宽度：

<div class="parent" style='display: inline-flex; flex-direction: column'>
  <div class="row1">row 1 is exactly this wide</div>
  <div class="row2" style='flex: 1; display: flex'>
    <span style='flex: 1'>thing1</span>
    <span style='flex: 1'>thing2</span>
  </div>
</div>

方式2：使用width: fit-content约束父容器宽度 #

保持父容器为块级Flex容器，添加width: fit-content让其宽度适配内容：

<div class="parent" style='display: flex; flex-direction: column; width: fit-content;'>
  <div class="row1">row 1 is exactly this wide</div>
  <div class="row2" style='flex: 1; display: flex'>
    <span style='flex: 1'>thing1</span>
    <span style='flex: 1'>thing2</span>
  </div>
</div>

如果需要让整个布局在页面中居中，可给.parent额外添加margin: 0 auto;。

两种方式都能让.parent的宽度由.row1的内容决定，进而让.row2的宽度与.row1一致，里面的两个span通过flex:1平分这个宽度，最终达到预期布局效果。

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