为什么我的div没有正确包装？

Question

我有一个非常简单的设置，如my plunker

中所示

这是我的HTML

<div class="container">
  <div class="checkbox"><input type="checkbox"/></div>
  <div class="label">Some Label</div>
  <div class="controls">
    <div class="link">Some link</div>
    <div class="warning">This is some long warning that should wrap on overflow</div>
  </div>
</div>

我正在尝试将controls部分包装起来，并阻止容器包装。

所以我写了这个CSS

.container{
  white-space:nowrap;
  &>div{
    display:inline-block;
  }  

  .controls{
    white-space:initial;
    background-color: #CECECE;
    &>div{
      display:inline-block;
    }
  }
  color:red; 

}

但是，控件div无法正确包装 如果您在＆＃34;窗口＆＃34;中预览，则可以看到它。模式并调整窗口大小。它需要一段时间，直到div认识到它应该包装。

有一段时间，一些＆＃34;长警告＆＃34;是部分隐藏而不是包装。

这是我看到的

正如您所看到的，overflow这个词被截断了。我希望该元素包含在.controls内，但它不会这样做。

我该如何做到这一点？

Answer 1

我刚刚使用flex-box将您的代码复制到小提琴并在那里进行了调整。我不是百分百确定我是否真的明白究竟是什么问题，但可能会有所帮助。

FIDDLE