CSS:如何在动态宽度容器内强制宽度？

Question

首先，这是 fiddle :https://jsfiddle.net/u8v3rgyt/1/

基本情况是这样的:我有一些文本，其长度会有所不同。在此文本下方有一列(编辑: 不同数量的)按钮，这些按钮的文本也各不相同。我想要的是让文本控制整体宽度，然后让按钮列调整其宽度/按钮的宽度作为响应。换句话说，对于两种不同大小的文本，我试图实现以下目标:

// Short text
La la la la
[Button 1
  text]
[Button 2
  with long
  text]

// Longer text
La la la la la la la la la la
[Button 1 text]
[Button 2 with long text]

但我得到:

// Short text
La la la la
[Button 1 text]
[Button 2 with long text]

我觉得我很接近，但我无法让按钮容器具有正确的宽度(因此我无法限制我的按钮的宽度)。或者更确切地说，我可以，但为此我必须在文本上放置一个固定宽度，但这不起作用，因为我需要整个东西根据文本调整它的大小。

如有任何帮助，我们将不胜感激。

Answer 1

据我了解，您希望文本指示按钮所在区域的宽度。使用 CSS3 flex 盒模型，您可以按照以下方式做一些事情:

.container {
  display: inline-block;
  border: 1px solid red;
  margin-bottom: 24px;
}

.inner {
  display: flex;
  flex-wrap: wrap;
}

button {
  flex-grow: 1;
}

<div class="container">
  <p>Some text blah blah blah, blah blah blah</p>
  <div class="inner">
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>