CSS width rule for inner div that has dynamic content - html

Question

I have two divs, an outer div and an inner div inside it. I've set the outer div to have a fixed width (505px) with overflow-x: scroll.
My inner div contains floated left dynamic content (meaning there could be one div or 100) and so could have a width of anywhere between 50px to 5000px. I'm trying to style the inner div so that it can accommodate the dynamic content all on one line but it's not behaving like that; it's hitting the 505px and moving down to the next line. If I give it a width of 5000px, obviously it's working, but the content could be much less than that. What am I doing wrong?
#outer-div {
width: 505px;
height: 100%;
float: left;
background-color: #fff;
overflow-x: scroll;
overflow-y: hidden;
}
#inner-div {
width: auto;
display: inline;
}
.dynamic-content {
width: 62px;
height: 100%;
font-size: 13px;
text-align: center;
float: left;
}
<div id = "outer-div">
<div id = "inner-div">
<div class = "dynamic-content"></div>
<div class = "dynamic-content"></div>
<div class = "dynamic-content"></div>
etc...
</div>
</div>

Answer 1

It's not a width setting..you need to stop the line breaks with white-space:nowrap
#outer-div {
width: 505px;
height: 100%;
float: left;
background-color: #fff;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid grey;
white-space: nowrap;
}
.dynamic-content {
height: 100%;
font-size: 13px;
text-align: center;
display: inline-block;
}
<div id="outer-div">
<div class="dynamic-content">AAAAAAAAAAAAA</div>
<div class="dynamic-content">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div class="dynamic-content">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
etc...
</div>

Answer 2

You can do it with flexbox:
http://codepen.io/anon/pen/grymeG
The inner DIV becomes the flex-container, with flex-wrap:no-wrap to stay in one line and overflow-x: visible;, the dynamic contents get flex-shrink: 0; to not be reduced in width:
#inner-div {
width: auto;
height: 100%;
overflow-x: visible;
display: flex;
flex-wrap: no-wrap;
}
.dynamic-content {
width: 62px;
flex-shrink: 0;
height: 100%;
font-size: 13px;
text-align: center;
}

Answer 3

white-space: nowrap forces the inner elements to stay on the same line, but it won't work with floated element. So you can use display: inline-block but you need to use a trick for the space between the divs (negative margin or html comments between them).
Example :
.outer {
border: 1px solid black;
height: 100px;
width: 500px;
overflow-x: scroll;
white-space: nowrap;
}
.content {
display: inline-block;
margin-left: -4px;
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid red;
}
<div class="outer">
<div class="inner">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>

Answer 4

you need to use white-space:no-wrap;
the style will be like this:
#outer-div {
width: 505px;
height: 100%;
float: left;
background-color: #fff;
}
#inner-div {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.dynamic-content {
height: 100%;
font-size: 13px;
text-align: center;
display: inline-block;
}
see your demo here https://jsfiddle.net/IA7medd/o831zdqs/