html,
body {
height: 100%;
margin: 0px;
}
.container {
display: flex;
width: 100%;
height: 100%;
background-color: yellow;
}
.box {
flex-shrink: 0;
}
<div>
<div class="container">
<div class="box">
<h1>A</h1>
<p>clap</p>
</div>
<div class="box">
<h1>W</h1>
<p>clap</p>
</div>
<div class="box">
<h1>S</h1>
<p>clap</p>
</div>
<div class="box">
<h1>D</h1>
<p>clap</p>
</div>
<div class="box">
<h1>Q</h1>
<p>clap</p>
</div>
<div class="box">
<h1>E</h1>
<p>clap</p>
</div>
<div class="box">
<h1>R</h1>
<p>clap</p>
</div>
</div>
</div>
How can I make the (.container) full screen with a flex display?
I am trying to achieve full window coverage in both height and width using the flex property, but setting height to 100% does not fill the entire window. Grid layout seems to cover the full window, how can I accomplish this with flex?