Within a parent element, I have a div that allows for horizontal scrolling. Using CSS and jQuery, the content can overflow horizontally with white space no wrap. Setting a fixed width for the div works well, but my responsive website requires a dynamic width.
I searched for information on this issue but couldn't find a clear answer. Here's the structure:
.dashboard_container {
display: table;
height: 100%;
width: 55rem;
margin: auto;
padding-top: 2rem;
}
.dashboard_post_container {
background: white;
position: relative;
display: inline-table;
-webkit-border-radius: .4rem;
-moz-border-radius: .4rem;
border-radius: .4rem;
margin-bottom: 2rem;
width: 100%;
overflow: hidden;
}
.dashboard_suggestions {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
Here's an example in a fiddle: https://jsfiddle.net/08vwyg4b/
The challenge is to make the child div 100% width while maintaining the necessary behavior of white space no-wrap.