`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>