JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper1">
<header>
header
</header>
<nav>
nav
</nav>
<aside>
aside
</aside>
<main>
main
</main>
<footer>
footer
</footer>
</div>
text after inline-flex (with width)
<div id="wrapper2">
<header>
header
</header>
<nav>
nav
</nav>
<aside>
aside
</aside>
<main>
main
</main>
<footer>
footer
</footer>
</div>
text after flex (with width)
<div id="wrapper3">
<header>
header
</header>
<nav>
nav
</nav>
<aside>
aside
</aside>
<main>
main
</main>
<footer>
footer
</footer>
</div>
flex without width

CSS

/*now i see the difference between display:flex; and display:inline-flex; */
#wrapper1 {
display:inline-flex; 
background:gray;
width: 400px;
}
#wrapper2 {
display:flex; 
background:gray;
width: 400px;
}
#wrapper3 {
display:flex; 
background:gray;
}

#wrapper1 > * { flex: 1; margin: auto; }
#wrapper2 > * { flex: 1; margin: auto; }
#wrapper3 > * { flex: 1; margin: auto; }