How to set CSS to grow parent height only from one of two children?

Question

I would like to have the parent (orange border) only grow to the size of the first child (grey background) and have the second child overflow vertically.

This is what I have:

This is what I want:

Codepen: https://codepen.io/gbucher/pen/wPGBpN

HTML:

<div class='parent'>
  <div class='child1'>
  </div>
  <div class='child2'>
    <div class='elem'>
      A
    </div>
    <div class='elem'>
      B
    </div>
    <div class='elem'>
      C
    </div>
    <div class='elem'>
      D
    </div>
    <div class='elem'>
      E
    </div>
  </div>
</div>

CSS:

.parent {
  border: 2px solid orange;
  display: flex;
  /* How to make it work without a fixed
     height ?
  height:60px;
  */
}

.child1 {
  height: 60px;
  width: 300px;
  background: #888;
}
.child2 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.elem {
  border: 1px solid black;
  margin-top: -1px;
  padding: 3px;
  width: 10rem;
}

@Michael_B this is not a duplicate (does not have to be done using flexbox). — Anna B, Nov 06 '17 at 13:26
For people searching for this use case and looking at your "duplicate" will make it even more confusing. There exists solutions to this problem and none to the other. Clearly not the same questions by definition. — Anna B, Nov 07 '17 at 03:57
You're right. It's not exactly the same question. But people come to this site looking for *answers*, not questions. That's why the heading of the duplicate note says: **This question already has an answer here:** — Michael Benjamin, Nov 07 '17 at 11:00
But if you really want the question re-opened just click "reopen" above. — Michael Benjamin, Nov 07 '17 at 11:01
Yes, I think it should be reopened and I cannot do it: no such button on my side of the editing power. — Anna B, Nov 08 '17 at 03:43

score 0 · Answer 1 · answered Nov 09 '17 at 08:24

When computing the size of a parent, absolute positioned children are ignored.

The solution is thus to use a scroll wrapper around the second child. The wrapper should have position: relative and the scrolling child should have position: absolute.

.parent {
  border: 2px solid orange;
  display: flex;
}

.child1 {
  height: 70px;
  flex-grow: 1;
  background: #888;
}

.child2 {
  display: flex;
  flex-direction: column;
  position: absolute;
  background: orange;
}

.scroll {
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 323px;
  background: green;
}

.elem {
  border: 1px solid black;
  margin-top: -1px;
  padding: 3px;
  width: 300px;
}

<div class='parent'>
  <div class='child1'>
    one
  </div>
  <div class='scroll'>
    <div class='child2'>
      <div class='elem'>
        A
      </div>
      <div class='elem'>
        B
      </div>
      <div class='elem'>
        C
      </div>
      <div class='elem'>
        D
      </div>
      <div class='elem'>
        E
      </div>
    </div>
  </div>
</div>

How to set CSS to grow parent height only from one of two children?

1 Answers1