使元素占用可用的水平空间而不导致其父元素变宽

Question

我有一个 flexbox 容器，其中正好有两个孩子，它们都可以有可变的内容。我希望整个容器的宽度适合第一个孩子的宽度，但我希望第二个孩子的内容能够换行并且 不 导致容器水平增长。请参阅下面的可运行 sn-p 以获得直观的问题描述。

目前正在寻找 CSS 网格解决方案。我找到了一个部分解决方案，但依赖于 JavaScript：将第二个孩子设为相对容器，将其内容放入中间绝对定位的容器中，并使用 JS 设置固定高度。至少它可以很好地展示我正在寻找的东西。

问题：

.container {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid red;
}

.child {
  background-color: wheat;
  margin: 5px;
}

<div class="container">
  <div class="first child">
    This content can grow and be as wide as it wants
  </div>
  <div class="second child">
    This content will also be any size it wants, but I * want it to wrap at the asterisk in this sentence, which is where the first child above would naturally end. This will be its own flexbox container holding several buttons that should wrap onto new rows.
  </div>
</div>

JavaScript/绝对解决方案：

let second = document.getElementsByClassName('second')[0]
let content = document.getElementsByClassName('absolute')[0]

second.style.height = content.offsetHeight + 'px'

.container {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid red;
}

.child {
  background-color: wheat;
  margin: 5px;
}

.second {
  position: relative;
  /* height to be set by JS */
}

.absolute {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

<div class="container">
  <div class="first child">
    This content can grow and be as wide as it wants
  </div>
  <div class="second child">
    <div class="absolute">
      This content is longer than the above but still wraps in the right place.
    </div>
  </div>
</div>

Answer 1

只需设置min-width 和width 的.second：

.container {
  border: 1px solid red;
  display: inline-block;
  padding: 5px;
}

.child {
  background-color: wheat;
}

.second {
  margin-top: 10px;
  min-width: 100%;
  width: 0;
}

<div class="container">
  <div class="first child">
    This content can grow and be as wide as it wants
  </div>
  <div class="second child">
    This content will also be any size it wants, but I * want it to wrap at the asterisk in this sentence, which is where the first child above would naturally end. This will be its own flexbox container holding several buttons that should wrap onto new rows.
  </div>
</div>