How to scroll nested flexbox child when flexbox container has specified height

Question

I am trying to make nested flexbox child div (child211) to show scroll when no space available. Flexbox container has predefined height. Flexbox parent child2 of child211 has overflow: hidden. I do not want scroll whole child2.

BTW: I am showing only basic structure as in my real scenario the path to the last div is really long.

Example CSS and HTML looks like below:

.container {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  height: 380px;
}

.child {
  font-size: 100px;
  color: white;
}

.child1 {
  font-size: 50px;
  background: red;
}

.child2 {
  height: 100%;
  background-color: green;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.child21 {
  background-color: rgb(20, 255, 0);
}

.child211 {
  background-color: rgb(200, 255, 0);
  overflow: auto;
}

.child3 {
  font-size: 50px;
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child1 child">
      DIV1
    </div>
    <div class="child2 child">
      DIV2
      <div class="child21 child">
        DIV21
        <div class="child211 child">
          DIV211
        </div>
      </div>
    </div>
    <div class="child3 child">
      DIV3
    </div>
  </div>
</body>

</html>

Normally, for `overflow` to generate a vertical scroll, you need a defined `height` or `max-height` (or, when appropriate, `flex-basis`) somewhere along the way. https://stackoverflow.com/q/52487743/3597276 — Michael Benjamin, Apr 01 '19 at 21:31
@TemaniAfif. This will cause whole div2 to have scroll and this is what I do not want. — kapalkat, Apr 01 '19 at 21:50
@Michael_B I have tried to set the height or flex-basis on div211 but this doesn't help. — kapalkat, Apr 01 '19 at 21:58

score 0 · Answer 1 · answered Apr 02 '19 at 00:04

Make child2 to be a flex container with a column direction and simply add overflow:auto on the nested child elements:

.container {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  height: 380px;
}

.child {
  font-size: 100px;
  color: white;
}

.child1 {
  font-size: 50px;
  background: red;
}

.child2 {
  height: 100%;
  background-color: green;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

.child21 {
  background-color: rgb(20, 255, 0);
  overflow:auto;
}

.child211 {
  background-color: rgb(200, 255, 0);
  overflow: auto;
}

.child3 {
  font-size: 50px;
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child1 child">
      DIV1
    </div>
    <div class="child2 child">
      DIV2
      <div class="child21 child">
        DIV21
        <div class="child211 child">
          DIV211
        </div>
      </div>
    </div>
    <div class="child3 child">
      DIV3
    </div>
  </div>
</body>

</html>

You can keep nesting flex container if you want the scroll on an inner level.

.container {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  height: 380px;
}

.child {
  font-size: 100px;
  color: white;
}

.child1 {
  font-size: 50px;
  background: red;
}

.child2 {
  height: 100%;
  background-color: green;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

.child21 {
  background-color: rgb(20, 255, 0);
  overflow:auto;
  display:flex;
  flex-direction:column;
}

.child211 {
  background-color: rgb(200, 255, 0);
  overflow: auto;
}

.child3 {
  font-size: 50px;
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child1 child">
      DIV1
    </div>
    <div class="child2 child">
      DIV2
      <div class="child21 child">
        DIV21
        <div class="child211 child">
          DIV211
        </div>
      </div>
    </div>
    <div class="child3 child">
      DIV3
    </div>
  </div>
</body>

</html>

How to scroll nested flexbox child when flexbox container has specified height

1 Answers1