CSSで「min-margin」的な最小幅を確保した左右マージンを入れる

コンテンツをウインドウ幅に対して中央寄せした画面で左サイドメニューがあるとき、ウインドウを縮めてもコンテンツがサイドメニューに被らないように、「左サイドメニュー分の最小幅」を確保する方法。
min-marginというスタイルは存在しないが、それっぽい動きを実現する。
仕組みがわかりやすい方法は以下。

<style>
div { border:1px solid red; } /* これは仕組みを見やすくするために書いているだけで必須ではない */
</style>
<div style="display:flex;">
  <div style="flex-grow: 1; min-width:300px;"></div>
  <div style="width:500px; background-color:cyan;">コンテンツ</div>
  <div style="flex-grow: 1;"></div>
</div>

before, after疑似要素で左右スペーサーを作る、htmlが単純になる方法が以下。

<style>
.left-space-container {
	display		: flex;
    border		: 1px solid red; /* これは仕組みを見やすくするために書いているだけで必須ではない */
}
.left-space-container::before,
.left-space-container::after {
    content		: '';
    display		: block;
    flex-grow	: 1;
}
.left-space-container::before {
	min-width	: 200px;
}
</style>
<div class="left-space-container">
  <div style="width:500px; background-color:cyan;">コンテンツ</div>
</div>