Why does the width of the parent block (float:left) not depend on the shift of one of the nested blocks?

Question

css

There are three blocks. One parent and two nested ones - all float: left;
Nested blocks share the width of the parent (30% and 70%).
The second nested block has a negative margin equal to its own width (margin-left: -70%).
However, the parent box occupies the same width as if the nested box had not been shifted.
Online example
1) - Why doesn't the parent block get narrower?
2) - How do the blocks calculate the width?
I assume that the parent block calculates the width from the total width of the nested blocks.
And the width of the nested ones depends on their content.
But for some reason, shifting nested blocks doesn't affect the parent.
(Where can I read about the rules of their behavior)?)

Answer 1

I think you're right - the width of the blocks depends on the content.
now, if you set the width not in% but in pixels, then the width of the parent would be calculated from the widths of the inner blocks, and the shift would affect the width,
but in general, back in 12, they asked similar questions habrahabr.ru/post/136622

Answer 2

It looks like a parent box can only take into account the offset of its nested box if the nested boxes have a hard (in pixels) width.
Working Example
Otherwise, if nested element offset will affect the width of the parent element, then it will also affect the width of other boxes.