I am facing an issue with a row that contains two columns. The first column has content that should be visible without overflowing, while the second column includes a long list that needs to be scrollable within the row.
The challenge with responsive design and overflow:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="alert alert-info">
<h2>Some stuff</h2>
<hr />
<h4>Some stuff description</h4>
<p>
some example with some <code>code</code>
</p>
</div>
</div>
<div class="col-4 list">
<div class="list-group">
<div class="list-group-item"><p>item</p></div>
........ (long list continues)
</div>
</div>
</div>
</div>The current non-responsive design approach:
I have manually set the height of the rows and applied overflow-y: scroll; to the list for scrolling. However, I believe this method may not provide the level of responsiveness I require.
.row {
height: 175px;
overflow-y: hidden;
}
.list {
height: 175px;
overflow-y: scroll;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="alert alert-info">
<h2>Some stuff</h2>
<hr />
<h4>Some stuff description</h4>
<p>
some example with some <code>code</code>
</p>
</div>
</div>
<div class="col-4 list">
<div class="list-group">
<div class="list-group-item"><p>item</p></div>
........ (same long list repeated)
</div>
</div>
</div>
</div>If anyone has a solution to achieve the following requirements :
- Make the row's height relative to the first column's height,
- Enable the second column to overflow-scroll when necessary