`align-items: flex-end` 破坏了 `overflow: auto`

Question

由于某些奇怪的原因，添加align-items: flex-end甚至flex-start破坏了粉红色弯曲项目的良好滚动溢出行为，因为它比容器高度高。

如果这是预期的行为，请帮助我保留滚动，即使在弯曲端对齐中也是如此。

这是演示。

.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

另一种方法可以是： 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>

或没有对齐项目的最大高度+边距：

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

或使用柱流：

.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

align-items和属性align-self显然破坏了滚动功能。

幸运的是，有一个简单而干净的替代方案：弹性auto边距。

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>

有关弹性auto边距的更多信息，请参见此处：

• 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？