How to solve the problem with falling blocks?

Question

css

Hello everyone! :)
I can not understand the reason for this behavior of the three nested blocks. With display: inline-block; blocks do not fall out, but when I start putting pictures and text into these blocks, they begin to behave unpredictably. With float:left; everything works fine, the only problem is that the blocks fall out of the stream. I always prescribed pseudo spacers to the blocks, and everything worked well, but in this case it does not work. I tried to prescribe .clearfix {clear:both}, but everything turned out to be unsuccessful. Please help in solving this problem.
Thanks in advance! :)
Source code:
https://jsfiddle.net/vymv3rL6/1/

Answer 1

Because of the float, it does not calculate the block size and it does not stretch.
Add a class to content:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Answer 2

I understand the problem in footer : https://jsfiddle.net/vymv3rL6/12/

Answer 3

Hastily adjusted the dimensions, using "vw, vmin" and a percentage. The background was made to see the sizes of the blocks.
The main thing is to make the pictures "rubber", then they will not jump out of the "diva". Do not judge strictly, in a hurry.
- Result