html - 为什么我的 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 没有正确换行。
如果您在“窗口”模式下预览并调整窗口大小，您可以看到它。在 div 识别出它应该换行之前需要一段时间。

有一段时间，一些“长警告”被部分隐藏而不是换行。

这是我看到的

如您所见，单词 overflow 被截断了。我希望该元素包含在 .controls 中，但它并没有这样做。

我怎样才能让它工作？

Answer 1

我刚刚将您的代码复制到 fiddle 中，并使用 flex-box 对其进行了调整。我不是 100% 确定我是否真的理解确切的问题是什么，但可能会有所帮助。

FIDDLE