В вашем контейнере есть flex
, но у ваших внутренних элементов div нет каких-либо правил, обеспечивающих соотношение между двумя элементами div.для обеспечения соотношения 1: 1 используйте это как для divs
.container>div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%;
height: 50vh;
color: white;
font-size: 40px;
}
, так и для сокращения (не работает в IE)
flex: 1 0 50%;
Без него браузер может изменитьсоотношение в соответствии с содержанием каждого div - даст больше места для div с «большим / широким» содержимым.