CSS：如何在动态宽度容器中强制宽度？

首先，这是小提琴：

基本场景是这样的：我有一些文本，它们的长度会有所不同。在此文本下方，我有一列（编辑：不同数量的）按钮，这些按钮也有不同的文本。我想让文本控制总宽度，然后让按钮列调整其宽度/按钮的宽度作为响应。换句话说，对于两种不同大小的文本，我试图实现以下目标：

// 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]

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

---

任何帮助都将不胜感激。

据我所知，您希望文本指示按钮所在区域的宽度。使用CSS3 flex box模型，您可以按照以下思路进行操作：

HTML

---

您希望按钮与最长的按钮一样宽吗？我很狡猾是的，对不起（虽然我甚至不能让整个图案工作，有或没有等长按钮）。好主意。。。但不幸的是，在这种情况下，按钮的数量也是动态的：（我已经编辑了提琴/答案，因此它不再依赖于按钮的数量-请检查againI甚至没有听说过

flex

或

flex grow

，但是caniuse.com说它们是受支持的，所以…太棒了。我今晚没有时间尝试这个解决方案，但我会在早上一回来就尝试。谢谢！我真的很高兴。）I don’我不再看你的小提琴了，我意识到有一个问题：现在所有的按钮都排在一行，而不是一列：（你使用的浏览器和版本是什么？它可能不支持display:flex；

<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>

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

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

button {
  flex-grow: 1;
}