'align-items: center/flex-end ' breaks 'overflow: scroll'

實例

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

.slidesWrap {
  display: flex;
  align-items: center;
  overflow: auto;
}

.slide {
  overflow: auto;
  flex: 1;
  max-height:100%;
}

結果：

左側區域的content不見了。並且滾動也不會出現。
這是由於overflow：scroll 只會對下方或右側超出的部分滾動 ，對左側和上方無效（左側能夠嘗試float: right設置超出。也是橫向無滾動）

解決方案

1.中間再包一層
2.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>

.slidesWrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.slide {
  overflow: auto;
  flex: 1;
  max-height:100%;
}

結果：