Question

考虑以下布局：

<div class="div">
  <span class="span1">test</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;
}

为什么div不足以覆盖两个跨度？这种情况发生在FF和Chrome中。在IE 11 / Edge中它可以工作（正如我所期望的那样）这是小提琴https://jsfiddle.net/p18h0jxt/

PS：如果我使用以下样式，它可以在任何地方使用：

.span1{
   flex:0 0 auto;
   width:100px;
}

感谢。

Answer 1

来自 this SO answer ：

影响所有主流浏览器的Bug，IE 11＆amp;边缘：

就像你说的那样 - 显然100px在嵌套的flex容器中不受尊重。

因此flex: 0 0 100px;来自width的{{1}}弹性基础无法正常工作（除了具有讽刺意味的IE 11＆amp; Edge）。

解决方法（也称为here）是使用flex-basis代替.div { display: inline-flex; background-color: lightgray; } .span1 { width: 100px; } .span2 { white-space: nowrap; }，如下所示：

＆＃13;

<div class="div">
  <span class="span1">test</span>
  <span class="span2">test test test test test</span>
</div>

＆＃13;

flex

＆＃13;

您可以使用inline-flex代替div，但是inline-flex会像块元素一样呈现，即它会占用可用的全宽，而不是被限制在你的内容中。

我假设您使用的是import java.awt.BorderLayout; import java.awt.Frame; import java.awt.Menu; import java.awt.MenuBar; import java.awt.MenuItem; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; public class Main extends Frame { public Main() { this.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e) { System.exit(0); } }); Menu mn = new Menu("File"); MenuItem mi = new MenuItem("It is very very long text"); mn.add(mi); mi = new MenuItem("long"); mn.add(mi); MenuBar mb = new MenuBar(); mb.add(mn); this.setLayout(new BorderLayout()); this.setMenuBar(mb); this.setSize(200,200); this.setVisible(true); } public static void main(String[] args) { new Main(); } }，因此背景仍然仅限于内容。

Answer 2

您在当前示例中引用的100px是指flex-basis而不是元素宽度。

内联柔性容器宽度不增长

2 个答案: