Why is the width of the container not taken into account if the child element does not have a width set?

Question

css

We have two columns of fixed width and one that takes up the rest of the space. This is what happens if you insert content wider than the column. How to fix it?

It is necessary that it works in the same way as if you set the width.

Answer 1

.main > .content
add rule
min-width: 0;
https://jsfiddle.net/z5eLt8w9/1/

Answer 2

Why don't you want to set the size of the middle column?
If you have a left column of 120px, a right column of 240px, then you can set the middle one to width: calc(100% - 360px); and everything will be fine. And it is not necessary to insert blocks with a rigidly specified width into the "rubber" block, at least it is not logical, because it should shrink when resized.