I am facing an issue with two divs that are wrapped inside a container div. The bottom div contains a dynamically filled table, which determines the overall width of all the divs.
On the top div, I want to display several small red blocks that need to take up the available horizontal space. However, they should wrap to a new line if they exceed the maximum allowed width.
My desired outcome is illustrated in the following image:
https://i.sstatic.net/Gazij.png
Despite various attempts to style the red blocks using CSS (such as using small floating divs or inline-blocks), they consistently exceed the allowed width. As a result, all the divs end up wider than the table:
https://i.sstatic.net/a3GJ7.png
Is there a way to make sure that these red blocks only utilize the permitted width and move to a new line when they reach the maximum space?
Thank you!
UPDATE: I have provided a working example demonstrating the issue with the red blocks (which have varying lengths). They currently sit next to each other, expanding beyond the allowed width. It is crucial that they shift to a new line once the table's width limit is reached. http://codepen.io/anon/pen/bqobGp?editors=1100#0
table td{
border:thin solid gray;
line-height:25px;
padding:0 5px;
}
.div1, .div2 {
margin-top:15px;
padding:20px;
background:white;
box-shadow:2px 0 3px rgba(0,0,0,.12)
}
.container {
display:inline-block;
background:#f1f1f1;
padding:30px;
}
.badge {
line-height:30px;
background:red;
min-width:150px;
color:white;
margin:5px 10px;
text-align:center;
font-family:sans-serif;
border-radius:5px;
display: inline-block;
}