‘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%;
}

结果：