html,body{
height: 100%;
}
#app{
height: 100%;
border: 2px solid black;
}
.row{
display: flex;
height: 100%;
}
.col-3 {
width: 20%;
background: red;
}
.col-6 {
width: 60%;
background-color:blue;
}
#large-item{
height: 100%;
width: 100%;
background: yellow;
}<div id="app">
<div class="row">
<div class="col-3">
<h2>left column</h2>
</div>
<div class="col-6">
<h2>middle column</h2>
<div id="large-item">Large item</div>
</div>
<div class="col-3">
<h2>right column</h2>
</div>
</div>
</div>This is a layout I constructed with three columns according to the guidelines on w3cschools. However, when I set the height of html and body to 100%, the large item in the columns tends to overflow, creating an unattractive look. Is there a way to make it responsive by automatically adding a scroll bar while ensuring that the background color still fills the columns?