内联柔性容器宽度不增长 [英] inline flex container width not growing
问题描述
< div class =div>
< span class =span1>测试< / span>
< span class =span2> test test test test test< / span>
< / div>
和css:
.div {
display:inline-flex;
background-color:lightgray;
}
.span1 {
flex:0 0 100px;
}
.span2 {
white-space:nowrap;
$ b 为什么div不能覆盖两个跨度?这发生在FF和Chrome。在IE 11 /边缘它的作品(我期望它的工作)
这是小提琴 https:// jsfiddle.net/p18h0jxt/
PS:如果使用以下风格,它可以在任何地方使用:
.span1 {
flex:0 0 auto;
width:100px;
$ / code>
谢谢。
解决方案从 这个答案 :
影响所有主流浏览器的问题,除了IE 11& Edge:
正如您所说的 - 显然 flex-basis
不被尊重在一个嵌套的柔性容器中。
所以你的 100px
从 flex:flex:0 0 100px;
不能正常工作(IE 11和Edge中除外)。
解决方法(也提到)是使用宽度
而不是 flex-basis
like所以:
$ b
.div {display:inline-flex; span-color:lightgray;} span1 {width:100px;}。span2 {white-space:nowrap;}
< div class =div> < span class =span1>测试< / span> < span class =span2> test test test test test< / span>< / div>
您可以使用 flex
而不是 inline-flex
div
将会像块元素一样呈现,即它将占用整个宽度,而不是局限于您的内容。
我假设您正在使用 inline-flex
,以便背景保持局限于内容。
Consider the following layout:
<div class="div">
<span class="span1">test</span>
<span class="span2">test test test test test</span>
</div>
and the css:
.div{
display:inline-flex;
background-color:lightgray;
}
.span1{
flex:0 0 100px;
}
.span2{
white-space:nowrap;
}
Why isn't the div stretched wide enough to cover the two spans? This happens in FF and Chrome. In IE 11/Edge it works (as I would expect it to work)
Here's the fiddle https://jsfiddle.net/p18h0jxt/
PS: It works everywhere if I used the following style:
.span1{
flex:0 0 auto;
width:100px;
}
Thanks.
解决方案 From this SO answer:
Bug affecting all major browsers, except IE 11 & Edge:
Just as you said - apparently flex-basis
is not respected in a nested flex container.
So your 100px
flex-basis from flex: 0 0 100px;
can't work properly (except ironically in IE 11 & Edge).
The workaround (also mentioned here) is to use width
instead of flex-basis
like so:
.div {
display: inline-flex;
background-color: lightgray;
}
.span1 {
width: 100px;
}
.span2 {
white-space: nowrap;
}
<div class="div">
<span class="span1">test</span>
<span class="span2">test test test test test</span>
</div>
You could use flex
instead of inline-flex
, but then your div
will be rendered like a block element i.e. it will take up the full width that's available rather than being confined to your content.
I assume you are using inline-flex
so that the background remains confined to the content.
这篇关于内联柔性容器宽度不增长的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文