Encountered with a challenge like this. There is a large block (referred to as container), which is split into two sections col-4 and col-8. The container consists of fixed height blocks at the top, while there are blocks that need to have floating height. Additionally, there is a block with scroll functionality.
How can I set the height with a scroll feature to be floating? I am having trouble identifying the issue in my code below.
.all-height {
min-height: 100%;
}
.all-height__itme-one {
background: #5bc0eb;
height: 200px;
margin-bottom: 20px;
padding: 10px;
}
.all-height__itme-two {
background: #e7606b;
min-height: 300px;
margin-bottom: 20px;
padding: 10px;
}
.all-height__itme-three {
background: #68d8d6;
height: 500px;
margin-bottom: 20px;
padding: 10px;
overflow-x: scroll;
}
.all-height__itme-three-item {
margin-bottom: 20px;
background-color: #e7606b;
padding: 15px;
color: #fff;
}
.all-height__itme-four {
background: #59a5d8;
height: 100%;
margin-bottom: 20px;
padding: 10px;
}
.all-height__itme-five {
background: #ccd42c;
height: 100%;
margin-bottom: 20px;
padding: 10px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row align-items-stretch">
<div class="col-xl-4">
<div class="all-height">
<div class="all-height__itme-one">
<p>This unit with fixed height</p>
</div>
<div class="all-height__itme-three">
<p>Floating altitude</p>
<div class="all-height__itme-three-item">Lorem ipsum dolor</div>
<!-- More items -->
</div>
</div>
</div>
<div class="col-xl-8">
<div class="all-height">
<div class="all-height__itme-two">
<p>This unit with fixed height</p>
</div>
<div class="row align-items-stretch">
<!-- Two more columns -->
</div>
</div>
</div>
</div>
</div>