My goal is to have both the child-1 (blue) and child-2 (black) retain their original width when the sidebar appears by enabling horizontal scrolling upon clicking anywhere in the demo below.
document.body.onclick = () => document.querySelector('.sidebar').classList.toggle('hide')html, body {height: 100%; margin: 0; padding: 0; overflow: hidden; }
.container {
display: flex;
height: 100%;
overflow: hidden;
}
.sidebar {
flex: 0 0 12rem;
background: green;
}
.sidebar.hide {
margin-left: -12rem;
}
.parent { display: flex; flex: 1; flex-shrink: 0; overflow: hidden;}
.child-1, .child-2 {
flex: 1;
flex-shrink: 0;
height: 100%;
overflow: auto;
}
.child-1 { background: blue;}
.child-2 { background: black;}
<div class="container">
<div class="sidebar hide"></div>
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
</div>