HTML no-wrap conflicting with Divs text wrapping

Question

I'm trying to use the white-space: nowrap in CSS to allow scrolling on overflow.

However, this prevents the innerHTML inside the divs to wrap.

If I remove the white-space: nowrap, the innerHTML works as it should but the divs don't scroll, instead they go onto new line.

With no-wrap:

Without no-wrap:

Answer 1

Here's a working example of a few div elements, with a horizontal scroll when they overflow their parent node, which is a section in this demo.

In the below demo, I thought it best to use flexbox, which gives some nice benefits.

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>

Answer 2

Leave the

white-space: nowrap;

in the outer div and in each inner div:

white-space: normal; 

for example:

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