I seem to be facing issues with the flex + overflow combination while testing in Safari.
For reference, here is the JSFiddle link: https://jsfiddle.net/9dtrr84c/2/
<div class="container-fluid">
<div class="row parent">
<div class="col-12 col-sm-7 left">
<div class="row top">
<div class="col">Top</div>
</div>
<div class="row bottom">
<div class="col-sm-7 my-list-container">
<ul class="list-group">
<div class="list-group-item dummy-item">Dummy item</div>
<div class="list-group-item dummy-item">Dummy item</div>
<div class="list-group-item dummy-item">Dummy item</div>
</ul>
</div>
<div class="col-sm-5 flex-end">
This should align at the end
</div>
</div>
</div>
<div class="hidden-xs-down col-sm-5 right">
</div>
</div>
</div>
In addition, here is the relevant CSS:
/* Using bootstrap v4 */
/* Link to Bootstrap stylesheet: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css */
html,
body,
.container-fluid,
.parent {
height: 100%;
}
.dummy-item {
height: 300px;
}
.left {
display: flex;
flex-direction: column;
}
.left .top {
flex-shrink: 0;
}
.left .bottom {
flex-shrink: 1;
flex-basis: 100%;
display: flex;
}
.my-list-container {
overflow-y: auto;
}
.flex-end {
align-self: flex-end;
}
The aim is for the list to expand and show an overflow scrollbar if needed.
This setup behaves as expected in Chrome but encounters problems in Safari. I am currently on version 10.1.2 of Safari and do not require support for older browsers.
Your assistance would be greatly appreciated! Thank you!