在flexbox布局中，横轴是否有`flex-shrink：0`声明？

Question

我想防止flex容器中的元素缩小尺寸，而不是flex-direction。以下示例将<article>元素并排放置。当可用的垂直空间减小时，这些元素不会强制其flex容器显示滚动条；相反，内容溢出元素边界。

屏幕截图1-有足够的水平和垂直空间来显示所有内容：

屏幕截图2-减少的垂直空间将元素边框向上推：

屏幕截图3-垂直空间进一步减小，容器最终得到一个滚动条：

屏幕截图4-如果没有flex-shrink:0，元素的宽度（主弯曲轴）也将减小：

flex-shrink:0 可以防止水平收缩，但是如何防止元素垂直收缩呢？

提供<article>元素overflow: auto或类似内容不会产生期望的结果（=容器上的滚动条）。理想情况下，显示如下所示：

如果我事先知道元素的高度，则可以给它们一个min-height，但是并非总是如此。

内容： http : //jsfiddle.net/twdan8u8/

HTML：

<main>
    <article>article<br>article<br>article</article>
    <article>article<br>article<br>article</article>
</main>

CSS：

* {
    box-sizing: border-box; /* not the culprit */
}
html {
    height: 100%;
}
body {
    position: relative;
    height: 100%;
    margin: 0;
    background: #999;
}
main {
    overflow: auto;
    background: gold;
    display: flex;
    height: 80%;
    padding: 50px 30px;
}
article {
    flex-shrink: 0;
    font-size: 28px;
    border: 2px solid red;
    margin-right: 30px;
    padding: 10px;
}

Answer 1

就像经常发生的情况一样，我在写完问题后找到了（或者更确切地说是一个）解决方案。由于这可能对其他人有所帮助，因此我发现了以下内容：

如果 flex 容器被赋予 style align-items: flex-start，元素高度不会降低，并且容器在必要时获得滚动条（假设一个合适的overflow值）。

此属性的默认值是“拉伸”。它也可以使用align-self. 缺点是元素现在不再同样高（即，它们不再伸展到完整的可用高度）。