CSS scrolling of container with dynamically sized children - html

Question

I have a container which is populated dynamically with child elements. The width attribute for individual child elements is retrieved from backend in % adding up to 100%. This is because the desired effect is that the childs preserve size proportions in comparison to one another.
.wrapper {
display: flex;
width: 100%;
}
.item {
overflow: hidden;
height: 20px;
}
<div class="wrapper">
<div class="item" style="width: 30%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 15%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 5%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 40%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 10%">Lorem ipsum dolor sit amet</div>
</div>
The problem is that there can be an arbitrary number of children and the more of them the more squashed they become. Consequently stopping to fit the content.
Therefore I would like them to have a min-width and be able to scroll the container horizontally while still preserving the proportions retrieved from the database.
I tried:
Setting width on the container to a fixed value e.g. 2000px and overflow-x to auto. The width could be calculated somehow on rendering the page. It makes the childs scale nicely to add up to cover the 100% of the width of the container. The issue is that the scrolling doesn't work, because the container is physically 2000px wide and you have to scroll the whole page rather than the container
Setting min-width on childs causes the proportions to be lost
So I need a solution that combines both of them but can't seem to figure it out. I would appreciate any help and ideas.

Answer 1

You can use flex-wrap: wrap on the .wrapper so that when the children cannot fit the width of the parent they will simply go to another row. This way they can easily fit horizontally, but they will stretch vertically instead.
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.item {
overflow: hidden;
height: 20px;
}
<div class="wrapper">
<div class="item" style="width: 30%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 15%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 5%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 40%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 10%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 30%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 15%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 5%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 40%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 10%">Lorem ipsum dolor sit amet</div>
</div>

Answer 2

I managed to solve the problem thanks to #Michael_B's answer to this question.
I changed my html to:
<div class="wrapper">
<div class="item" style="flex: 0 0 30%">Lorem ipsum dolor sit amet</div>
<div class="item" style="flex: 0 0 15%">Lorem ipsum dolor sit amet</div>
<div class="item" style="flex: 0 0 5%">Lorem ipsum dolor sit amet</div>
<div class="item" style="flex: 0 0 40%">Lorem ipsum dolor sit amet</div>
<div class="item" style="flex: 0 0 10%">Lorem ipsum dolor sit amet</div>
</div>
and CSS to:
.wrapper {
display: flex;
width: 100%;
overflow-x: auto;
justify-content: flex-start;
}
Note that there was an issue with the content overflowing on the left side, so you couldn't scroll to it. This is what justify-content was needed for. I found the solution here.