I am currently developing a project that requires infinite horizontal scrolling for cells containing thumbnails and text. While most of the functionality is in place, I am facing an issue with text wrapping. The CSS and HTML code are provided below. The first two items in the scroll box should have wrapped text, but they overflow instead.
Here is the style (cell 2 is used for demonstration 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>Access the fiddle for more information: https://jsfiddle.net/jonathannah/3rxcktpm/29/