`align-items：flex-end`中断`overflow：auto`

Question

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

如果这是预期的行为，请帮助我保留滚动，即使在弹性端对齐。

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

另一种方式可以是：max-height：100％;

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 或者没有align-items的max-height + margin：

＆＃13;

＆＃13;

.slidesWrap {
  display: flex;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或使用列流程：

＆＃13;

＆＃13;

.slidesWrap {
  display: flex;
  flex-flow: column wrap;
  justify-content:flex-end
}

.slide {
  overflow: auto;
  width:50%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

幸运的是，有一个简单而干净的选择：flex 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>

有关flex auto页边距的更多信息：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?