html - 我怎样才能将 flexbox 限制为它的第一个 child 的宽度？

Question

我有一个简单的两行布局。顶行应确定宽度(基于其内容，而不是 css 值)，底行中的两个元素应展开以匹配该宽度:

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

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

问题是 thing1 和 thing2 扩展到它们祖 parent 的宽度，而不是 row1 的:

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

如何将 parent div 的宽度限制为 row1 的宽度？或者，如何实现这样的布局？

Answer 1

令我惊讶的是，这很简单，将 .parent.width 和 .row1.width 都设置为 max-content 并离开其余按原样。

这样.parent就不允许超出它的内容，而这又受到.row1的宽度的限制:

body * { outline: 1px dashed } /* for demo */

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