I have a container element with a specific width (while the height can vary) and a scrollbar. Inside this container, there are boxes. Each box has dimensions equal to half of the width/height of the container with the scrollbar. My goal is to display only the first 4 boxes in the scrollable element before it starts scrolling. However, uncommenting the fifth box causes everything to break.
How can I resolve this issue?
.main {
display: flex;
flex-direction: column;
width: 400px;
height: 300px;
overflow: auto;
overflow-x: hidden;
background-color: #dfdfdf;
}
.main .row {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.main .row .col-6 {
width: 200px;
}
.main .row .col-6 div {
border-width: 1px;
border-style: solid;
border-color: #fff;
background-color: #888;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main">
<div class="row no-gutters">
<div class="col-6">
<div>Rectangle 1</div>
</div>
<div class="col-6">
<div>Rectangle 2</div>
</div>
<div class="col-6">
<div>Rectangle 3</div>
</div>
<div class="col-6">
<div>Rectangle 4</div>
</div>
<!--
<div class="col-6">
<div>Rectangle 5</div>
</div>
-->
</div>
</div>