ホワイトスペース: nowrap with flex: 1; 子の幅が小さすぎてテキストを収容できません

Question

同じサイズの 2 つの div をテキストに 1 行に収める解決策が見つかりません。空白のように見えます。親の width:fit-content を設定した後、幅は考慮されなくなりました。

これらは可能な限り小さく、常に同じサイズにする必要があり、テキストを 2 行目に折り返さないでください。

div {
  ディスプレイ: フレックス;
  幅: コンテンツに合わせて;
}

。ボタン {
  パディング: 10px 20px;
  フレックス: 1;
  ホワイトスペース: ナラップ;
  最小幅: 130px;
  幅: コンテンツに合わせて;
}

.button1 {
  背景: 赤;
}

.button2 {
  背景: 緑;
}

<div>
  <div class="button button1">短いテキスト</div>
  <div class="button button2">幅が広い長いテキスト ボタン </div>
</div>

Answer 1

CSS グリッドを使用して実行できます:

リーリー リーリー