How to apply scorlbar to a section inside a flexbox?

Question

Consider the following:

* {padding: 0; margin: 0; }

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}

header {
    flex: 0 0 50px;
    background-color: lightgray;
}

div#wrapper {
    flex: 1 0 0px;
    display: flex;
    flex-direction: row;
}

aside {
    background-color: darkgray;
    flex: 0 0 50px;
}

main {
    display: block;
    flex: 1 1 0px;
    background-color: aliceblue;
}

div#content {
    width: 60px;
    height: 2000px;
    margin: 10px;
    background-color: red;
}


div#content-wrap {
    width: 100%;
    height: 100%;
}

div#content-container {
    height: 100%;
    overflow-y: scroll;
}

<html>
  <head></head>
  <body>
    <header></header>
    <div id="wrapper">
      <aside></aside>
      <main>
        <div id="content-wrap">
          <div id="content-container">
            <div id="content"></div>
          </div>
        </div>
      </main>
  </div>
</body>
</html>

In the snippet above, the <body> fills all the available space, it's consisted of a <header> which takes an arbitrary height and a <div id="wrapper"> that takes the rest of available height. The aforementioned "#wrapper" has a "sidebar" that has an arbitrary width and a "<main>" section to take the rest of the width. I want only the "main" section to be scrollable, but applying a long enough "#content" causes the "body" to get the scrollbar, instead! (while I've enforced the heights to be 100%) So, how to fix this?

REFER HERE:https://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content — gretal, Nov 30 '21 at 06:08
@gretal Thanks for the reply; I've applied the `min-height` property with the values of `min-content` and `100%` to no avails! Could you please elaborate. — goodUser, Nov 30 '21 at 06:16
As per [this answer](https://stackoverflow.com/a/35609992/14063881), I have to make all its parents to `overflow: hidden;`, or it will just ignore the `overflow` settings and make the parent larger instead. — goodUser, Nov 30 '21 at 06:26

score 0 · Answer 1 · answered Nov 30 '21 at 06:55

here only remove same height according to <header></header> from <div id="wrapper"> bcz of normaly it will take 100% height #wrapper so only add height: calc(100% - 50px);

div#wrapper {
    flex: 1 0 0px;
    display: flex;
    flex-direction: row;
    height: calc(100% - 50px);
}

and it will be working like below ss

How to apply scorlbar to a section inside a flexbox?

1 Answers1