Leerraum: Nowrap mit Flex: 1; untergeordnete Breite ist zu klein, um Text aufzunehmen

Question

Ich kann keine Lösung dafür finden, dass zwei Divs derselben Größe in den Text in einer Zeile passen. Sieht aus wie ein Leerzeichen: Nachdem ich die Breite des übergeordneten Elements festgelegt habe: fit-content, wird die Breite jetzt nicht berücksichtigt.

Sie sollten so klein wie möglich sein, immer die gleiche Größe haben und den Text nicht in die zweite Zeile umbrechen.

div {
  Anzeige: Flex;
  Breite: fit-content;
}

.Taste {
  Polsterung: 10px 20px;
  Flex: 1;
  Leerraum: nowrap;
  Mindestbreite: 130 Pixel;
  Breite: fit-content;
}

.Knopf 1 {
  Hintergrund: rot;
}

.button2 {
  Hintergrund: grün;
}

<div>
  <div class="button button1">Kurztext</div>
  <div class="button button2">Eine lange Textschaltfläche mit größerer Breite </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>