内联柔性容器宽度不增长 [英] 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屋！