0

I'm working on a simple sidebar layout using flex:

html, body {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

.wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: center;
  background-color: grey;
  padding: 10px;
}

.content {
  display: flex;
  flex-direction: row;
}
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: red;
  overflow-y: scroll;
}

.pagedata {
  display: flex;
  padding: 16px;
  flex-direction: column;
  background-color: blue;
  overflow: scroll;
}
<html>
  <div class="wrapper">
    <div class="header">
      This is the header
    </div>
    <div class="content">
      <div class="sidebar">
        <div>SideBar:</div>
        <div>Option 2</div>
        <div>Option 3</div>
        <div>Option 4</div>
        <div>Option 1</div>
        <div>Option 2</div>
        <div>Option 3</div>
        <div>Option 4</div>
        <div>Option 2</div>
        <div>Option 3</div>
        <div>Option 4</div>
        <div>Option 2</div>
        <div>Option 3</div>
        <div>Option 4</div>
        <div>Option 2</div>
        <div>Option 3</div>
        <div>Option 4</div>
        <div>Option 2</div>
        <div>Option 3</div>
        <div>Option 4</div>
        <div>Option 2</div>
        <div>Option 3</div>
        <div>Option 4</div>
      </div>
      <div class="pagedata">
        <p>Content Page</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
        <p>This is the page data</p>
      </div>
    </div>
  </div>

</html>

As it is the flex child's are not getting full heigh if screen height is bigger than content, and if screen height is smaller than content, the whole page is scrolling vertically.

How can I make the flex children scroll their own content using CSS:

  • sidebar must scroll vertically (Y)
  • pagedata must scroll horizontally and vertically (X and Y)

Both of them I want to fill full height (even if content is smaller than height).

halfer
  • 19,824
  • 17
  • 99
  • 186
Mendes
  • 17,489
  • 35
  • 150
  • 263
  • margin:0 to body + height:100% to wrapper + min-height:0 to content + flex-grow:1 to content and pagedate – Temani Afif Apr 06 '20 at 21:32
  • ^ not sure what is different from this old question (https://stackoverflow.com/q/61027161/8620333) and why you didn't apply the styles I commented there – Temani Afif Apr 06 '20 at 21:34
  • Is `min-height: 0` a default? [from w3](https://www.w3schools.com/cssref/pr_dim_min-height.asp). It makes all the difference (without it does not work) – Mendes Apr 06 '20 at 21:37
  • from one of the duplicate questions of your old question: https://stackoverflow.com/q/36247140/8620333 .. if you read it you will understand why the need of min-height:0 and what is the default value (reading the duplicate question is important for you to understand, we are not closing question to simply bother you but to give you what you need to understand in order to solve your issue) – Temani Afif Apr 06 '20 at 21:39
  • @Temani Afif: It's difficult to find out a solution if we have to look to 4 different duplicates with different subjects/answers. We never know what are you're pointint out exactly in a small comment. This question is directed to flex child behaviour, not so generic. I've applied your comments in the last question and did not solve the problem. A simple question and aswer would be much more valuable on this cases, and for future users to find out. How the hell I would imagine my problem would be related to "flex shrink past content size"... Keep SO flowing - this is what makes it so powerfull. – Mendes Apr 06 '20 at 21:52

0 Answers0