空白：nowrap 与 flex: 1;子项宽度太小，无法容纳文本

Question

我找不到任何解决方案来让 2 个相同大小的 div 将文本容纳在一行中。看起来像空白：在我设置父宽度：fit-content后，现在不考虑宽度。

它们应该尽可能小，大小始终相同，不要将文本换行到第二行。

div {
  display: flex;
  width: fit-content;
}

.button {
  padding: 10px 20px;
  flex: 1;
  white-space: nowrap;
  min-width: 130px;
  width: fit-content;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}

<div>
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>

Answer 1

可以使用 CSS 网格来完成：

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

.button {
  padding: 10px 20px;
  white-space: nowrap;
  min-width: 130px;
  overflow: auto;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}

<div class="container">
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>