HTML免换行与Divs文字换行冲突

Question

我正在尝试在CSS中使用white-space: nowrap来允许在溢出时滚动。

但是，这会阻止 divs 中的innerHTML换行。

如果我删除了white-space: nowrap，则innerHTML可以正常工作，但是 divs 不会滚动，而是转到新行。

不带包装：

没有自动换行：

Answer 1

离开

white-space: nowrap;

在外部div和每个内部div中：

white-space: normal; 

例如：

.outer-div{
  white-space: nowrap;
}
.outer-div>div{
  white-space: normal;
}

Answer 2

这是一些div元素的工作示例，当它们溢出其父节点（在本演示中为section）时具有水平滚动。

在下面的演示中，我认为最好使用flexbox，这会带来一些好处。

section{  
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  flex-wrap: nowrap;
  border: 1px solid green;
  height: 150px;
}

div{  
  flex: 400px;
  min-width: 200px;
  margin: 5px;
  padding: 5px;
  background: silver;
}

<section>
  <div>some very very long text which should probably break because it is very long.</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>