How to Make a Scrollable Div Take the Remaining Space in a Flexbox?-CodePudding

I have these basic snippets. I would like for .orange to scroll when it fills with too much content. I also need .orange to be compressed first to its minimum height when the screen is shrunk, and only after should the two children overflow .root. Furthermore, when I add content to .orange, I don't want it to change the size of anything else.

I'm not sure how to achieve this, I've researched everywhere but cannot find any answers. I also cannot set a max-height to .orange, I simply want it to take up the rest of the container via flex: 1;.

https://codepen.io/Sean713/pen/VwBeEyP

.root {
  height: 70vh;
  display: flex;
  flex-direction: column;
}

.blue {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.white {
  height: 50px;
}

.orange {
  flex: 1;
  min-height: 30px;
  overflow-y: scroll;
}


/* ________________STYLING_______________ */

.root {
  width: 300px;
  border: 3px solid red;
}

.blue {
  border: 5px solid blue;
}

.white {
  background-color: grey;
  border: 3px solid white;
}

.orange {
  background-color: lightgrey;
  border: 3px solid orange;
}

p {
  margin: 0;
  padding: 0;
}

<div >
  <div >
    <div >
      I have fixed height (panel)
    </div>
    <div >
      <p>I have a minimum height</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
    </div>
  </div>
</div>

CodePudding user response：

By default, a flex item cannot be smaller than the size of its content, thus the min-height value for the .blue container is set to auto. Setting it to a different value (such as min-height: 0) should resolve this issue.

CodePudding user response：

If an element has flex: 1, this means the size of all of the other elements will have the same width as their content, but the element with flex: 1 will have the remaining full space given to it

remove flex:1 from your .orange class

.root {
  height: 70vh;
  display: flex;
  flex-direction: column;
}

.blue {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.white {
  height: 50px;
}

.orange {
  height: 30px;
  overflow-y: scroll;
}


/* ________________STYLING_______________ */

.root {
  width: 300px;
  border: 3px solid red;
}

.blue {
  border: 5px solid blue;
}

.white {
  background-color: grey;
  border: 3px solid white;
}

.orange {
  background-color: lightgrey;
  border: 3px solid orange;
}

p {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div >
  <div >
    <div >
      I have fixed height (panel)
    </div>
    <div >
      <p>I have a minimum height</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
      <p>And I can scroll</p>
    </div>
  </div>
</div>
</body>
</html>