Как сделать два div одинаковой высоты?

Question

[Александр Коновалов]

Здравствуйте! Пытаюсь сделать, чтобы один блок подстраивался под высоту другого блока.
https://vk.cc/87osfP
Блок news должен быть такой же высоты, что и блок left_block с контентом. Все перепробовал, ничего не выходит. Можно это сделать на css или нужен js?

Answer 1

[boga-net]

поместите их в контейнер и каждому блоку задайте высоту 100%
или используйте для элементов

align-self: stretch;

или для родителя
align-items: stretch;

https://jsfiddle.net/80v2txbq/

Посмотрел ваш сайт

.content_wrapper {
display: flex;

.news {
overflow: auto; // уберите 
height: 300px; // уберите
margin-top: 40px; // уберите

у блока

Comments

[Антон Спирин]

align-self: stretch; тут не нужен, так как свойство контейнера align-items по умолчанию имеет значение stretch

[Александр Коновалов]

boga-net никакой реакции

[boga-net]

.news {
overflow: auto; // уберите 
height: 300px; // уберите
margin-top: 40px; // уберите
height: 100%; // задайте

фиксированная высота и скролл: авто и не давали сделать высоту 100%

[Антон Спирин]

Александр Коновалов, почитайте спецификацию Flex Box там все просто. Выпиливайте float и надо в правом блоке задать:

display: flex;
flex-direction: column;

Для блока новостей:
flex-grow: 1;

Ну и отступы все красиво задать.

[Александр Коновалов]

boga-net, посмотрите, что получилось

[boga-net]

Александр Коновалов, задайте всем элементам на странице

* {
   box-sizing: border-box;
}

[boga-net]

Александр Коновалов, content_wrapper - display: flex;
float у левого и правого - уберите

margin-top: 40px не забудьте убрать у новостей )

[Александр Коновалов]

boga-net, спасибо, получилось!

[boga-net]

Александр Коновалов, да не за что ) Зашёл сейчас на ваш сайт - вы так и не убрали
margin-top: 40px
у .news )

[Александр Коновалов]

boga-net, так отступа тогда не будет же)

[boga-net]

Александр Коновалов, всё, я вас понял - так и должно быть ) Ок )