我想防止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)到可用的全部高度)。