Overflow-y with flex-end - Why no scrollbar?

Question

Can someone please explain for me why the ".child" elements exceed their parent but no overflow-y scroll bar appears? Have a look at the Pen. The container on the left shows the parent with 3 child items. The container on the right shows the parent with 6 items which exceed the parent.

The goal is to have all ".child" items pushed to the bottom of their ".parent" container and if i add more it will expand from the bottom to top until it reaches the limit of the parent, at which point the scroll bar appears. This would be similar behavior to a chatbox messenger window.

Codepen

.outside {
  height: 200px;
  width: 200px;
  border: 4px solid green;
  overflow-y: auto;
}

.parent {
  height: 100%;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}

.child {
  height: 40px;
  width: 100%;
  background: #f00;
  flex: 0 0 auto;
}

.child:nth-child(odd) {
  background: red;
}

.child:nth-child(even) {
  background: blue;
}

<div class="outside" style="float:left; margin-right:10px">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>

  </div>
</div>

<div class="outside">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>
    <div class="child">
      Align to the bottom 4
    </div>
    <div class="child">
      Align to the bottom 5
    </div>
    <div class="child">
      Align to the bottom 6
    </div>
  </div>
</div>

a stone arachnid · Accepted Answer · 2019-02-22T16:53:13.490

Use min-height: 100% on the .parent instead of height: 100%:

.outside {
  height: 200px;
  width: 200px;
  border: 4px solid green;
  overflow-y: auto;
}

.parent {
  min-height: 100%;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}

.child {
  height: 40px;
  width: 100%;
  background: #f00;
  flex: 0 0 auto;
}

.child:nth-child(odd) {
  background: red;
}

.child:nth-child(even) {
  background: blue;
}

<div class="outside" style="float:left; margin-right:10px">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>

  </div>
</div>

<div class="outside">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>
    <div class="child">
      Align to the bottom 4
    </div>
    <div class="child">
      Align to the bottom 5
    </div>
    <div class="child">
      Align to the bottom 6
    </div>
  </div>
</div>

You may also want to add overflow-x: hidden to the .outside if you don't want to see the horizontal scrollbar. Alternately, you could use width:100% on the parent.

.outside {
  height: 200px;
  width: 200px;
  border: 4px solid green;
  overflow-y: auto;
  overflow-x: hidden;
}

.parent {
  min-height: 100%;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}

.child {
  height: 40px;
  width: 100%;
  background: #f00;
  flex: 0 0 auto;
}

.child:nth-child(odd) {
  background: red;
}

.child:nth-child(even) {
  background: blue;
}

<div class="outside" style="float:left; margin-right:10px">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>

  </div>
</div>

<div class="outside">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>
    <div class="child">
      Align to the bottom 4
    </div>
    <div class="child">
      Align to the bottom 5
    </div>
    <div class="child">
      Align to the bottom 6
    </div>
  </div>
</div>

Answer worked great. Thx. Now can u explain the difference between height:100% and min-height:100% for this situation? To me they amount to exactly the same statement. I'm reading some articles and it still doesnt make any sense. — user2522885, Feb 22 '19 at 16:17
@user2522885 This might help: https://stackoverflow.com/a/2341935/8828658 — a stone arachnid, Feb 22 '19 at 16:27
Is it possible to rework things so that overflow is removed from the "outside" and is applied directly onto the "parent" ? — user2522885, Feb 22 '19 at 16:41

Overflow-y with flex-end - Why no scrollbar?

1 Answers1