Utilizing the power of flexbox, I have organized the UI into left and right panels. The child elements within the right panel are stacked vertically by utilizing the white-space: nowrap; CSS property.
However, there seems to be an issue where increasing the width of the right panel's child elements ("comps") causes the left panel to shrink instead of displaying a vertical scroll bar in the right panel. How can I rectify this situation?
(I have added two buttons for increasing the child element width and resetting it) https://i.sstatic.net/t2BBL.png Check out the code pen snippet
$(function(){
$('#inc-width').click(function(){
$('#inner-div').width($('#inner-div').width() * 2);
});
$('#reset-width').click(function () {
$('#inner-div').width(1000);
})
}).parent {
display: flex;
flex-direction: row;
}
.left {
width: 20em;
height: 40em;
border: 1px solid;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
}
.inner-wrap {
white-space: nowrap;
padding: 10px 0;
background: green;
width: 100%;
flex: 1;
height: 100%;
overflow: auto;
}
.inner {
display: inline-block;
width: 1000px;
height: 250px;
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id="inc-width">Increase child element width</button>
<button id="reset-width">RESET child element width</button>
</div>
<div class="parent">
<div class="left">
LEFT PANEL
</div>
<div class="right">
<div style="flex: 1;">
<div class="inner-wrap">
<div class="inner" id="inner-div"></div>
<!-- <div class="inner"></div>
<div class="inner"></div> -->
</div>
</div>
</div>
</div>