空白：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>