フレックスボックスを使用してコンテンツの幅に基づいてスパンを作成する方法

Question

固定幅のフレックス行の親要素でspanとdivを使用しました

.parent {
  ディスプレイ: フレックス;
  フレックス方向: 行;
  幅: 230ピクセル;
  背景色: 青;
}

.child1 {
  背景色: 赤;
}

.child2 {
  最小幅: 40px;
}

<div class="parent">
    <span class="child1">これは span</span> 内のテキストです。
    <div class="child2"/>
</div>

スパンを常にテキストと同じ幅にし、div が親要素の残りの幅全体を占めるようにしたいと考えています。 (コード スニペットからわかるように) テキストが新しい行に移動すると、赤い背景領域がテキストよりも広くなります。このコードを修正するにはどうすればよいですか?赤い背景をテキストの端で正確に終了する必要があります

Answer 1

parent をグリッドに設定し、測定に fr 単位を使用できるでしょうか?

リーリー

これにより、テキスト コンテナがテキストと同じ幅になり、残りのコンテナが残りのスペースの 1 シェアを占めるようになります (他のコンテナがスペースの 100% を占めることはありません)。

行表示の場合は、列を行に変更するだけです。