endless horizontal stretch with unknown width of children - html

Question

What I'm trying to do is to create div which can expand endlessly to the right.
This is quite easy, there is a couple of working examples.
However, I have trouble with adapting from:
<div id="container">
<div class="item"></div>
<div class="item"></div>
...
</div>
To the design I'm using:
<div id="container">
<div class="project">
<div class = "textContainer">text Container 1.1 </div>
<div class = "imgContainer">img Container 1.1 </div>
...
</div>
<div class="project">
<div class = "textContainer">text Container 2.1 </div>
<div class = "imgContainer">img Container 2.1 </div>
<div class = "imgContainer">img Container 2.2 </div>
<div class = "imgContainer">img Container 2.3 </div>
...
</div>
</div>
Where textContainer and imgContainer are specialized classes to contain the obvious(Important note: I want the imgContainer to fill 100% of height and adjust horizontally to keep aspect-ratio).
To give better idea of my intentions (almost) working fiddle. Remove the comment in container to see desired effect.

Answer 1

Remove the floats. Convert all children to inline-blocks, and set white-space: nowrap on the .container and sub containers (.project). This will force everything to a single line, and will make the width of the container fit his children.
#container {
height: calc(100vh - 100px);
margin: 40px 0;
white-space: nowrap;
}
.project {
white-space: nowrap;
background: blue;
}
.textContainer {
width: 200px;
background: red;
}
.project, .imgContainer, .textContainer {
display: inline-block;
height: 100%;
vertical-align: top;
}
<div id="container">
<div class="project">
<div class="textContainer">text Container 1.1 </div>
<div class="imgContainer">img Container 1.1 </div>
<div class="imgContainer">img Container 1.2 </div>
<div class="imgContainer">img Container 1.3 </div>
</div>
<div class="project">
<div class="textContainer">text Container 2.1 </div>
<div class="imgContainer"><img src="http://myhswm.org/images/sized/images/animals/anjo-256x256.jpg"></div>
<div class="imgContainer">img Container 2.2 </div>
<div class="imgContainer">img Container 2.3 </div>
<div class="imgContainer">img Container 2.4 </div>
</div>
</div>