`align-items: flex-end` breaks `overflow: auto`

Question

For some strange reason, adding align-items: flex-end or even flex-start breaks the nicely scrolled overflow behavior of the pink flexed item because it's taller than the container height.

If this is expected behavior, help me retain the scroll even in flex-end alignment.

Here's demo .

 .slidesWrap { display: flex; flex-direction: row; align-items: flex-end; } .slide { overflow: auto; flex: 1; } 

 <div style="width: 200px; position:relative; top: 200px; background: silver;"> <div class="slidesWrap" style="height:200px"> <div class="slide"> <div style="height:300px; width:100%; background: pink;">content</div> </div> <div class="slide"> <div style="height:30px; width:100%; background: green;">content</div> </div> </div> </div> 

Answer 1

another way can be : max-height:100%;

 .slidesWrap { display: flex; flex-direction: row; align-items: flex-end; } .slide { overflow: auto; flex: 1; max-height:100%; } 

 <div style="width: 200px; position:relative; top: 200px; background: silver;"> <div class="slidesWrap" style="height:200px"> <div class="slide"> <div style="height:300px; width:100%; background: pink;">content</div> </div> <div class="slide"> <div style="height:30px; width:100%; background: green;">content</div> </div> </div> </div> 

or max-height + margin without align-items:

 .slidesWrap { display: flex; } .slide { overflow: auto; flex: 1; max-height:100%; margin-top:auto; } 

 <div style="width: 200px; position:relative; top: 200px; background: silver;"> <div class="slidesWrap" style="height:200px"> <div class="slide"> <div style="height:300px; width:100%; background: pink;">content</div> </div> <div class="slide"> <div style="height:30px; width:100%; background: green;">content</div> </div> </div> </div> 

or use column flow :

 .slidesWrap { display: flex; flex-flow: column wrap; justify-content:flex-end } .slide { overflow: auto; width:50%; } 

  <div style="width: 200px; position:relative; top: 200px; background: silver;"> <div class="slidesWrap" style="height:200px"> <div class="slide"> <div style="height:300px; width:100%; background: pink;">content</div> </div> <div class="slide"> <div style="height:30px; width:100%; background: green; ">content</div> </div> </div> </div> 

Answer 2

The align-items and align-self properties are clearly breaking the scroll function.

Fortunately, there is a simple and clean alternative: flex auto margins.

 flex-row { display: flex; } .slide { overflow: auto; flex: 1; display: flex; } .slide > div { margin-top: auto; /* pin items to bottom */ } 

 <div style="width: 200px; background: silver;"> <flex-row class="slidesWrap" style="height:200px"> <div class="slide" style=""> <div style="height:300px; width:100%; background: pink;"></div> </div> <div class="slide" style=""> <div style="height:30px; width:100%; background: green;"></div> </div> </flex-row> </div> 

More about flex auto margins here:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?