Html Question posted in
Some basic documentation can be found here.

Html – CSS Flex: Restrict max height of child within vertical Flex

I have a container (A) with flex-direction: column, containing 2 child elements (B and C)

The first child (B) has dynamic content and its height will vary.

The second child (C) uses flex-grow to fill the remaining height of the parent container.
enter image description here

How can I create a child (D) that takes the full height of it’s parent (C), with an overflow scroll property?

div {
  padding: 0.5rem;
  border: 1px solid black;
}

#A {
  position: relative;
  height: 200px;
  display: flex;
  flex-direction: column;
  background-color: #DAE8FC;
  padding: 1rem;
  gap: 1rem;
}

#B {
  background-color: #D5E8D4;
}

#C {
  position: relative;
  flex-grow: 1;
  background-color: #FEF2CC;
}

#D {
  overflow-y: scroll;
  background-color: #ffffff;
}
<!-- Content is editable to vary the content height easyly -->
<div id="A" contenteditable>
  <div id="B">
    Content Of B
  </div>
  <div id="C">
    Content Of C
    <div id="D">
      Content Of D
    </div>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As the original snippet already included a parent height, the actual answer here is:

    The inner child (D) also needs to include flex-grow: 1 - thanks to Mark for the tip


  2. 0

    Given some parent height the scroll works on the inner element.

    #A {
  height: 200px;
  display: flex;
  flex-direction: column;
  background-color: #FF0000;
}

#B {
  background-color: #00FF00;
}

#C {
  flex-grow: 1;
  background-color: #0000FF;
  height: 100%;
}

#D {
  flex-grow: 1;
  overflow-x: scroll;
  border: solid 1px #ff0000;
  background-color: #00FFFF;
  height: 100%;
}
    <div id="A">
  <div id="B">
    Some variable content
  </div>
  <div id="C">
    <div id="D" style="flex-grow: 1; overflow-y: scroll; background-color: #00FFFF">
      x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search