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

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

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

截屏3 -垂直空间进一步减小,容器最终得到一个滚动条:

截屏4 -如果没有flex-shrink:0,元素的宽度(主 flex 轴)也将减小:
flex-shrink:0可以防止水平缩小,但是如何防止元素垂直缩小呢?

<article>元素overflow: auto或类似的东西不能给出期望的结果(=容器上的滚动条)。理想情况下,显示如下所示:

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

FIDDLE: 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;
}

最佳答案

通常,当我写完问题时,我就找到了(或者说是一个)解决方案。由于这可能会对其他人有所帮助,因此我发现了以下内容:

如果为flex容器指定了align-items: flex-start样式,则不会降低元素的高度,并且在必要时(假定适当的overflow值),容器将获得滚动条。

此属性的默认值为“stretch”。也可以使用align-self在单个flex元素上设置它。缺点是元素现在不再具有相同的高度(即它们不再拉伸(stretch)到可用的全部高度)。

09-17 11:14
查看更多