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

结果：