◆ 内側の要素に合わせて広げたい要素に inline-block を指定する
◆ block の時みたいに端まで広がってほしいなら min-width: 100% も指定する

HTML の要素のサイズについてです
高さは子要素が大きくなると親要素もそれに合わせて広がります

ですが幅は親要素に合わせてくれません

例えばこういうページ

<!doctype html>
<meta charset="utf-8" />

<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#outer-container {
background: #ffe0c0;
padding: 10px;
}
#inner-container {
background:white;
box-shadow: 0 0 1px 1px #888;
padding: 2px;
flex-flow: column nowrap;
}
#minwidth-500{
min-width: 500px;
background: #dce9f9;
}
</style>

<div id="outer-container">
<div id="inner-container">
<section>
<div id="minwidth-500">
foo
</div>
</section>
<section>
<div>bar</div>
</section>
</div>
</div>

こういう表示です

protrude01

min-width を 500px にしてる div があるので ウィンドウを小さくすると青色のところがはみ出します

protrude02

理想は外側も広がってこうなることです

protrude03

どうすればいいのか結構困ったのですが 広げたい一番外側 ここでは outer-container に inline-block を指定すればできました
こうすると outer-container が内側の要素の幅まで広がるので inner-container の幅も min-width を指定した要素のサイズまで広がります

しかし block でないので自動で幅いっぱいまで広がりません
ウィンドウを大きくすると右側に隙間ができます

protrude04

この対処に outer-container に min-width を指定します

最終的に outer-container のスタイルはこうなりました

#outer-container {
background: #ffe0c0;
padding: 10px;
/* ⇩ 追加 */
display: inline-block;
min-width: 100%;
}

ヘッダー・メイン・フッターと並べてメインのブロックに min-width をつけてるときに便利かもしれません