フレックスボックスに 2 つの div が並んでいます。右側の div は常に同じ幅である必要があり、左側の div は残りのスペースだけを取得したいのですが、幅を明示的に設定しない限り、そうはなりません。
したがって、現時点では 96% に設定されていますが、画面を圧迫するまでは問題ないように見えます。圧迫すると、右側の div に必要なスペースが少し不足します。
そのままにしておくこともできると思いますが、何か違うような気がします。次のように言う方法があるはずです。
右の人はいつも同じです。左の人は残ったものをすべて手に入れます
.ar-course-nav {
cursor: pointer;
padding: 8px 12px 8px 12px;
border-radius: 8px;
}
.ar-course-nav:hover {
background-color: rgba(0, 0, 0, 0.1);
}<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
<div style="width:96%;">
<div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
<strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
</strong>
</div>
<div style="width:100%; display:flex; justify-content:space-between;">
<div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
A really really really really really really really really really really really long department name
</div>
<div style="color:#555555; text-align:right; white-space:nowrap;">
Created: 21 September 2016
</div>
</div>
</div>
<div style="margin-left:8px;">
<strong>></strong>
</div>
</div>ベストアンサー1
このflex-growプロパティを使用して、フレックス アイテムが主軸上の空きスペースを使用するようにします。
このプロパティは、画面のサイズ変更や他のアイテムの追加/削除などの動的な環境に合わせて長さを調整し、アイテムを可能な限り拡張します。
一般的な例としてはflex-grow: 1、または、短縮プロパティを使用した などがありますflex: 1。
したがって、width: 96%div の代わりに を使用しますflex: 1。
あなたが書いた：
したがって、現時点では 96% に設定されていますが、画面を圧迫するまでは問題ないように見えます。圧迫すると、右側の div に必要なスペースが少し不足します。
固定幅の div の圧縮は、別の flex プロパティに関連しています。flex-shrink
デフォルトでは、フレックス アイテムは に設定されておりflex-shrink: 1、コンテナーのオーバーフローを防ぐために縮小できるようになります。
この機能を無効にするには を使用しますflex-shrink: 0。
詳細については、こちらの回答の「要因」セクションを参照してください。flex-shrink
メイン軸に沿ったフレックス アライメントの詳細については、こちらをご覧ください。
交差軸に沿ったフレックス アライメントの詳細については、こちらをご覧ください。