CSS Issues with word wrapping in an infiinite scrolling div - html

Question

I am working on a project and want to have infinite horizontal scrolling for cells that each contain a thumbnail and some text. I have everything mostly working. However, I can not get text to wrap. The css and html are below. The first two items in the scroll box have text that should wrap, but overflows.
This is the style (cell 2 is only for demo to alternate background colors):
.container {
display: flex;
flex-direction: row;
padding: 10px;
height: 10%;
overflow-x: auto;
white-space: nowrap;
}
.cell {
background: #818181;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
}
.cell2 {
background: #f44336;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
}
.data {
justify-content: center;
word-wrap: break-word;
}
<div>
<h2>Scroll Test</h2>
<div class="container">
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here that will over flow</h3></span>
</a>
</div>
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<div class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"> </div>
<div class="data"> <h3>Some text here</h3></div>
</a>
</div>
<?php } ?>
</div>
</div>
Link to fiddle: https://jsfiddle.net/jonathannah/3rxcktpm/29/

Answer 1

Just add
h3 { white-space: normal }. The children of .containerinherit white-space: nowrap, which causes the problem.
Another issue in your html is the h3 inside a span, which is invalid. You shouldn't use block elements inside inline elements. You can change it to a div give it the style display: inline