JSFiddle - React, Tailwind, and code Playground
by Alexey Zuev
HTML
<div class="layout">
<div class="information">Как сделать левый div на всю высоту правого div?</div>
<div class="content">
<div class="content__in">
Как мне сделать, чтобы красный блок был по высоте схожий с синим. В синем блоке как видите будут новости (оранжевые блоки) и их может быть до 10 штук на одной странице т.е. появляется скролинг вниз т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет много текста. т.к. будет...
CSS
.layout {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.information {
background: #E50303;
-webkit-box-flex: 0 0 100px;
-webkit-flex: 0 0 100px;
-ms-flex: 0 0 100px;
flex: 0 0 100px;
padding: 1em;
color: #FFF;
}
.content {
-webkit-box-flex: 1 1 0;
-webkit-flex: 1 1 0;
-ms-flex: 1 1 0;
flex: 1 1 0;
padding-left: 2em;
}
.content__in {
background: #369;
color: #FFF;
padding: 1em;
}