如何根据内容最长的项目将弹性项目设置为等宽？

Question

场景如下：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: flex;
    border: 1px solid black;
}

.flex-item {
    background-color: cornflowerblue;
    height: 1.7rem;
    padding: 0 1.2rem;
    flex: 1 1 33.33333%;
    white-space: nowrap;
    max-width: 33.33333%;
}
</style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-container">
      <button class="flex-item">Foo</button>
      <button class="flex-item">Bar</button>
      <button class="flex-item">Long ass text here</button>
    </div>
  </div>
</body>
</html>

按钮大小相同，但问题是它们的大小不会根据内容最长的弹性项目进行缩放。相反，此处最后一个按钮的文本会溢出。看起来是这样的：

这就是我想要的样子：

简而言之，我想要3个宽度和高度相同的弹性按钮，宽度应根据内容最长的按钮确定。另外，我宁愿只用 CSS 来做这个（如果可能的话）。

编辑： 因为似乎存在一些误解，所以我想澄清一下宽度应该动态地改变，因此适用于为按钮提供的任何文本，而不是只是上面显示的那些。换句话说，您不能只添加例如width: 10rem 直接用于 flex-item，因为它只在特定情况下有效。

Answer 1

flex 在这种情况下失败了：

Display:grid 将来可以在这里做。

您的问题提到了 3 个要素：

教程https://css-tricks.com/snippets/css/complete-guide-grid/

浏览器支持http://caniuse.com/#search=grid

一个 Polyfill https://github.com/FremyCompany/css-grid-polyfill/

http://gridbyexample.com/browsers/

.flex-container {
  display: flex;
  border: 1px solid black;
  margin: 1em;
}

.flex-container .flex-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.flex-item {
  background-color: cornflowerblue;
  height: 1.7rem;
  padding: 0 1.2rem;
  width: 100%;
  white-space: nowrap;
}

@supports (display: grid) {
  .discl {
    display: none
  }
}

<p class="discl"> grid CSS seems not supported by your browser</p>
<div class="flex-container">
  <div class="flex-container">
    <button class="flex-item">Foo</button>
    <button class="flex-item">Bar</button>
    <button class="flex-item">Long ass text here</button>
  </div>
</div>
<div class="flex-container">
  <div class="flex-container">
    <button class="flex-item">Foo</button>
    <button class="flex-item">Bar</button>
    <button class="flex-item">Long text & Long text here</button>
  </div>
</div>

---

此外，从已知数量的元素来看，column CSS 可能在这里有用

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid black;
  margin:1em;
}

.flex-container .flex-container {
  display:block;
  -moz-column-count:3;
  -moz-column-gap:0;
  -webkit-column-count:3;
          column-count:3;
  -webkit-column-gap:0;
          column-gap:0;
}

.flex-item {
  background-color: cornflowerblue;
  height: 1.7rem;
  padding: 0 1.2rem;
  width: 100%;
  white-space: nowrap;
}

<div class="flex-container">
    <div class="flex-container">
      <button class="flex-item">Foo</button>
      <button class="flex-item">Bar</button>
      <button class="flex-item">Long ass text here</button>
    </div>
  </div>
  <div class="flex-container">
    <div class="flex-container">
      <button class="flex-item">Foo</button>
      <button class="flex-item">Bar</button>
      <button class="flex-item">Long ass text here Long ass text here</button>
    </div>
  </div>

在这两种情况下，display flex 仅用于将第二个容器缩小到其内容。在块父级中，float 或 display:inline-block 在该级别也可以。

Answer 2

请试试这个，让我知道它是否有效。

.flex-container {
    display:flex;
    align-items: stretch;
    border: 1px solid black;
}

.flex-item {
    background-color: cornflowerblue;
    height: 1.7rem;
    width: 10rem;
    padding: 0 1.2rem;
    flex: 1 1 33.33333%;
    white-space: nowrap;
    max-width: 50%;
    flex-grow: 1;
    flex-basis: 0;
}

<div class="flex-container">
<div class="flex-container">
  <button class="flex-item">Foo</button>
  <button class="flex-item">Bar</button>
  <button class="flex-item">Long ass text here</button>
</div>
</div>

Answer 3

我把显示器放在实心上。 只需给出一个固定宽度，它现在应该看起来像你想要的那样。

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: solid;
    border: 1px solid black;
}

.flex-item {
    background-color: cornflowerblue;
    height: 1.7rem;
    width: 10rem;
    padding: 0 1.2rem;
    flex: 1 1 33.33333%;
    white-space: nowrap;
    max-width: 50%;
}
</style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-container">
      <button class="flex-item">Foo</button>
      <button class="flex-item">Bar</button>
      <button class="flex-item">Long ass text here</button>
    </div>
  </div>
</body>
</html>