如何将 Flexbox 限制为其第一个子项的宽度？

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>

问题是thing1andthing2扩展到祖父母的宽度，而不是row1的：

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

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

Answer 1

创建一个新的父级div并将其设置为display:inline-block

<div style="display: inline-block">
  <div style="display: flex; flex-direction: column">
    <div>row 1 is exactly this wide</div>
    <div style="display: flex">
      <div style="flex: 1">thing1</div>
      <div style="flex: 1">thing2</div>
    </div>
  </div>
</div>