Scrollbar to a div inside a flex container - html

Question

The problem: The main-container shows a scrollbar when the content-container overflows. Also the width and height of the content-container can't be hardcoded because it should expand with the remaining space of the main-container.
Expectation: Only the content-container shows the scrollbar when the contents overflows and the width and height of main-container doesn't change.
The below code snippet is what I have tried
.main-container {
background: #364f6b;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
color: white;
}
.container__top {
min-height: 27px;
background: #43dde6;
}
.container__bottom {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.sidebar {
min-width: 80px;
width: 80px;
height: 100%;
background: #fc5185;
}
.right-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.tabbar {
height: 27px;
min-height: 27px;
background: #f0f0f0;
}
.content-container {
height: 100%;
overflow: auto;
}
<div class="main-container">
<diV class="container__top">
</div>
<div class="container__bottom">
<div class="sidebar">
</div>
<div class="right-container">
<div class="tabbar"></div>
<div class="content-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi ante, egestas
vulputate enim tincidunt sit amet. Cras nec augue sed felis eleifend blandit non eget ex. Maecenas at lacinia libero. Aliquam semper turpis eget mi blandit faucibus. Sed felis tellus, porttitor vitae tincidunt vel, volutpat et lectus. Morbi
blandit arcu id pulvinar convallis. Nulla vehicula ultrices metus, sit amet eleifend nibh rhoncus eu. Aenean gravida lobortis dignissim. Proin tempor mi vel libero vestibulum lacinia. Praesent a tempus quam. Nunc feugiat suscipit nibh eu cursus.
Cras quis nisl suscipit, pharetra dolor suscipit, aliquam arcu. Aenean venenatis, elit in congue mattis, elit urna convallis augue, eu sollicitudin ante tortor eget enim. Nam vitae urna non lacus finibus sagittis vestibulum vitae massa. Vestibulum
nec erat ac nisi ornare aliquet eu eu lectus. Nunc dictum turpis nec sagittis semper. Cras facilisis elit id blandit luctus. Donec at cursus velit. Donec scelerisque tristique orci vitae hendrerit. Nulla facilisi. Nunc sit amet finibus nibh.
Morbi dapibus viverra ante sit amet egestas. Maecenas bibendum tellus in nibh convallis consequat. Sed ac venenatis odio, sit amet sodales arcu. Cras metus ipsum, blandit nec luctus eget, egestas et justo. Aenean accumsan massa sed auctor elementum.
Duis eget elementum dolor. Nunc leo felis, interdum sed condimentum non, ultricies tempus risus. Maecenas at ornare leo. Praesent tristique nec nisl id accumsan. Praesent aliquet diam nec arcu molestie ornare. Nam ut gravida augue, non posuere
lorem. Nulla lacinia ex at felis condimentum convallis. Morbi a eleifend ipsum. Nulla sed magna scelerisque erat lacinia viverra vel ut elit. In molestie, urna vel sodales tristique, risus dui placerat elit, nec dictum lorem orci at nulla. Vestibulum
bibendum cursus tincidunt. Nullam hendrerit tristique diam ut rutrum. Cras vel dui porttitor, faucibus arcu a, volutpat nisi. Pellentesque pretium, orci id luctus egestas, orci quam scelerisque mi, sit amet euismod felis sem et nisi. Sed sodales,
ex vitae rhoncus mattis, massa neque faucibus mi, at egestas dui turpis et metus.
</p>
</div>
</div>
</div>
</div>
This is what I want to achieve

Answer 1

You are almost there - instead of using width and height, just use flex-grow and then for your scroll bar, you can absolutely position a div inside the content container to make it have a height of 100%
body,
html {
height: 100%;
margin: 0;
}
.main-container {
background: #364f6b;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: white;
}
.container__top {
min-height: 27px;
background: #43dde6;
}
.container__bottom {
flex-grow: 1;
display: flex;
flex-direction: row;
}
.sidebar {
min-width: 80px;
width: 80px;
background: #fc5185;
}
.right-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.tabbar {
height: 27px;
min-height: 27px;
background: #f0f0f0;
}
.content-container {
flex-grow: 1;
position: relative;
}
.overflow-container {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: auto;
}
<div class="main-container">
<diV class="container__top">
</div>
<div class="container__bottom">
<div class="sidebar">
</div>
<div class="right-container">
<div class="tabbar"></div>
<div class="content-container">
<div class="overflow-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi ante, egestas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi
ante, egestas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris
eleifend nisi ante, egestas vulputate enim tincidunt sit amet. Cras nec augue sed felis eleifend blandit non eget ex. Maecenas at lacinia libero. Aliquam semper turpis eget mi blandit faucibus. Sed felis tellus, porttitor vitae tincidunt vel,
volutpat et lectus. Morbi blandit arcu id pulvinar convallis. Nulla vehicula ultrices metus, sit amet eleifend nibh rhoncus eu. Aenean gravida lobortis dignissim. Proin tempor mi vel libero vestibulum lacinia. Praesent a tempus quam. Nunc
feugiat suscipit nibh eu cursus. Cras quis nisl suscipit, pharetra dolor suscipit, aliquam arcu. Aenean venenatis, elit in congue mattis, elit urna convallis augue, eu sollicitudin ante tortor eget enim. Nam vitae urna non lacus finibus sagittis
vestibulum vitae massa. Vestibulum nec erat ac nisi ornare aliquet eu eu lectus. Nunc dictum turpis nec sagittis semper. Cras facilisis elit id blandit luctus. Donec at cursus velit. Donec scelerisque tristique orci vitae hendrerit. Nulla
facilisi. Nunc sit amet finibus nibh. Morbi dapibus viverra ante sit amet egestas. Maecenas bibendum tellus in nibh convallis consequat. Sed ac venenatis odio, sit amet sodales arcu. Cras metus ipsum, blandit nec luctus eget, egestas et justo.
Aenean accumsan massa sed auctor elementum. Duis eget elementum dolor. Nunc leo felis, interdum sed condimentum non, ultricies tempus risus. Maecenas at ornare leo. Praesent tristique nec nisl id accumsan. Praesent aliquet diam nec arcu molestie
ornare. Nam ut gravida augue, non posuere lorem. Nulla lacinia ex at felis condimentum convallis. Morbi a eleifend ipsum. Nulla sed magna scelerisque erat lacinia viverra vel ut elit. In molestie, urna vel sodales tristique, risus dui placerat
elit, nec dictum lorem orci at nulla. Vestibulum bibendum cursus tincidunt. Nullam hendrerit tristique diam ut rutrum. Cras vel dui porttitor, faucibus arcu a, volutpat nisi. Pellentesque pretium, orci id luctus egestas, orci quam scelerisque
mi, sit amet euismod felis sem et nisi. Sed sodales, ex vitae rhoncus mattis, massa neque faucibus mi, at egestas dui turpis et metus.
</p>
</div>
</div>
</div>
</div>
</div>

Answer 2

Alternative way to make the layout
The solution given by #pete works perfectly for what I asked using flexbox.
Another way to make the layout is by using grids. With grid I was able to get rid of extra container divs.
Below code snippet uses grid for the layout. The first column of the grid is set to auto so that I can animate the sidebar. If we hover on the sidebar the grid automatically adjusts with the width of the sidebar.
body {
margin: 0;
height: 100vh;
width: 100vw
}
#root {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 29px auto 1fr;
grid-template-columns: auto 1fr 300px;
grid-template-areas:
"topbar topbar topbar"
"sidebar tabbar tabbar"
"sidebar content content";
}
#topbar {
grid-area: topbar;
background: #ba53de;
}
#sidebar {
width: 80px;
grid-area: sidebar;
background: #f469a9;
transition: 100ms ease;
}
#sidebar:hover {
width: 150px;
}
#tabbar {
height: 25px;
grid-area: tabbar;
background: #f4fa9c;
}
#content {
grid-area: content;
background: #88bef5;
height: 100%;
width: 100%;
overflow: auto;
}
.story{ padding: 10px; }
<div id="root">
<div id="topbar"></div>
<div id="sidebar"></div>
<div id="tabbar"></div>
<div id="content">
<div class="story">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin tincidunt ex ut rutrum. Ut quis sagittis odio. Integer magna orci, facilisis a porttitor sed, gravida vel tortor. Nulla scelerisque faucibus vehicula. Donec in libero dignissim,
placerat velit a, pretium ante. Donec sed eros orci. Praesent quis neque at mauris facilisis eleifend eget elementum sem. Nam pulvinar mauris odio, sit amet scelerisque mauris porta non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Maecenas eget tristique lectus. Quisque sed quam felis. Vestibulum sit amet semper dui. Mauris sit amet consectetur nibh. Sed cursus viverra elit quis accumsan. Proin pharetra lorem nec nisl tempus pretium. Cras vel suscipit
odio, in mattis sem. Vivamus finibus odio eu nisl egestas tristique. Mauris posuere gravida pulvinar. Suspendisse a lacus purus. Morbi imperdiet arcu et aliquet cursus. Ut condimentum magna at eleifend vehicula. Nullam interdum fermentum lectus.
Ut vitae molestie dolor. Etiam mollis ut purus vitae tempor. Mauris aliquet ex sit amet vestibulum ultrices. Quisque id leo nec mauris feugiat volutpat non ac diam. Praesent ac eros sed lorem tempor commodo. Donec quam urna, congue nec metus vitae,
vulputate semper ligula. Nunc eleifend pharetra dolor, eget congue nisl mattis non. Integer ultrices ex in dapibus pharetra. Nullam viverra non eros in congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eu ante malesuada,
pharetra est eget, placerat neque. Quisque et leo cursus, fringilla velit in, posuere nulla. Donec tincidunt augue et arcu lobortis volutpat. Phasellus eu vulputate est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc diam eros,
consectetur id urna id, ullamcorper semper ipsum. Quisque diam mi, condimentum at gravida at, fermentum a velit. Aenean a turpis nec eros imperdiet luctus eget eget erat. Aenean non viverra nisi. Aliquam ligula erat, eleifend vel lacus varius, tincidunt
tristique turpis. Aenean suscipit risus sed diam euismod, sit amet gravida tortor condimentum. Morbi auctor luctus quam, quis vestibulum leo auctor a. Sed convallis, tellus eget lacinia fringilla, massa justo consequat ante, sed aliquam enim felis
ac est. Fusce rutrum ipsum quis imperdiet gravida. Vestibulum facilisis vel est in ultrices. Maecenas rhoncus nisl vitae consectetur pulvinar. Praesent imperdiet, lorem sed dapibus bibendum, velit tortor molestie elit, et ornare mi nisl ut lacus.
Morbi quis vestibulum elit. Donec sed aliquam purus, vitae porta enim. Vivamus finibus dui sed faucibus eleifend. Praesent ac ligula arcu. Aliquam et cursus quam. Aliquam tempor neque leo, ac tincidunt ipsum gravida sit amet. Phasellus ac turpis
sit amet ex gravida auctor. Donec non imperdiet nisl. Donec facilisis mi at diam euismod, eu finibus lacus tincidunt. In cursus scelerisque urna molestie ullamcorper. Sed varius ornare lectus, nec ultricies leo facilisis non. Nulla facilisi. In
hac habitasse platea dictumst. Proin et leo dignissim, tristique libero vitae, lacinia metus. In pulvinar metus vitae arcu consectetur, facilisis pellentesque sem consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Vivamus quis volutpat justo. Praesent ipsum orci, blandit id dignissim in, mattis eget felis. Aenean rutrum est urna, ut laoreet nisi scelerisque quis. Nam augue risus, fermentum venenatis lectus a, malesuada condimentum odio.
</div>
</div>
</div>