Prevent elements from extending their parent DIV - html

Question

I have two div's, wrapped inside one container div. The bottom div contains a dynamically filled table (with variable width), which determines the overall width of all div's.
In the top div, I want to list several small red blocks (div's or span's or whatever). These red blocks need to take the available horizontal space, but wrap to a new line if they reach the max allowed width.
So this is what I want to achieve:
Unfortunately, I can't make it work. No matter how I CSS the red blocks (small floating div's, or inline-block's), they keep on taking more width than allowed. As a result, all div's become a lot wider than allowed, wider than my table:
How can I force these red blocks to only use the allowed with, and pick a new line if they run out of space?
Thanks!
UPDATE:
Here's a working example that shows the red blocks (which have variable length) next to each other, taking up more width than they are allowed. They need to start on a new line as soon as the table's width 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;
}

Answer 1

Based on my historical experience, you can achieve such behavior using basic HTML tables if you set small width on a parent table element...
So: for your code, we can use display: table and a small width on .container and white-space: nowrap; for .div2 (to prevent line breaks on table) as following:
.container {
display: table;
width: 50px; /* use a small value */
...
}
.div2 {
white-space: nowrap;
}
here is the updated code pen

Answer 2

/* shrink 2nd div to fit the table */
.div2 {width: fit-content;}
/* shrink first div to minimum size
* but constrain it to shrink no further than width established by its siblings
*/
.div1 {min-width: available; width: min-content;}
alternative approach
.container {width: min-content;}
These width values are fairly new and the spec are still in flux, so different browsers may support them under different names or prefixes may be needed.

Answer 3

I'm not sure what you call your "red" blocks in your css file, but something that is short and simple would be to calculate the width.
For example:
.parent {
width: 100%;
padding: 0;
margin: 0;
background: green;
float: left;
}
.red_block {
width: calc(100% / 5 - 20px); /* Calculate width here - where it takes the full 100% of the parent and divides it by 5 "red blocks" and subtracts 20px for each */
height: 40px;
padding: 0;
margin: 10px;
background: red;
float: left;
}
<div class="parent">
<div class="red_block"></div>
<div class="red_block"></div>
<div class="red_block"></div>
<div class="red_block"></div>
<div class="red_block"></div>
<!-- Will wrap to second line -->
<div class="red_block"></div>
<div class="red_block"></div>
<div class="red_block"></div>
</div>
DEMO
Does this answer your question?
UPDATE:
With your "red blocks" being calculated via width, you can even specify that class in some media queries to change the width to your liking for mobile devices! Example:
#media screen and (max-width: 48em) {
.red_block {
width: calc(100% / 3); /* or to whatever you want...IE: width: 100%; */
}
}