我实际上找到了解决问题的方法,但想知道为什么我原来的解决方案不起作用。
我有一个简单的 flex 容器,我希望第一个 div 占容器的 30%。我给它一个 30% 的 flex-basis 来尝试实现这一点。这一直有效,直到我的内容超过 30% 的长度。此时,它扩展了 div 使其超过 30%。
我使用 max-width 属性解决了这个问题,这是我在研究之后从另一个问题中发现的,但仍然很困惑为什么 flex-basis 不起作用,并且在使用 flex box 时不希望有 max-width 属性。我读到如果 flex-direction 是 row,flex-basis 应该是 width 的替代品,但事实似乎并非如此。
这是一个 fiddle 和它的CSS: https://jsfiddle.net/jg5nbdgp/12/
.container {
display:flex;
flex-direction: row;
.left {
flex-basis: 30%; /* This doesn't work */
/* max-width: 30%; */ /* This works */
.box {
height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.middle {
flex-basis: 50%;
}
.right {
flex-basis: 20%;
}
}
最佳答案
It is because flex box items cannot be smaller than the actual content. This is the default behaviour of flexbox.
将 min-width:0
包含到 .left
类将使 flex-basis
工作。
因此在您的情况下,您的内容宽度大于 flex-basis
值,并且默认情况下 flexbox 行为 flex box 宽度不能小于内容。按照 flexbox 的术语,你的代码实际上已经变成了
.left {
flex-basis: 30%;
min-width: auto;
max-width: auto;
}
所以你必须更新宽度来让 flexbox 克服默认行为。将您的类(class)更新为
.left {
flex-basis: 30%;
min-width: 0;
}
在单词顺序中,您可以记住 width
值在 flex-basis
值之前。
JsFiddle:https://jsfiddle.net/gLodw7k1/
关于html - Flex Basis 行为不符合预期,但最大宽度有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49747825/