Використання CSS Flexbox для позиціонування блоків на сторінці

Завдання
У блоці на сторінці потрібно розмістити два вкладених блоку таким чином, щоб один блок мав максимальну висоту, а другий — займав все залишився в батьківському блоці вільне місце по висоті. Причому, у разі, якщо контент не поміщається в блок, додавати йому скролл.

image

Реалізація
При реалізації даної задачі було прийнято рішення використовувати CSS Flexbox.
Для початку варто вирішити задачу без урахування контенту, тобто з двома порожніми дочірніми блоками:

image
Як це працює
Батьківського блоку (на малюнку позначено зеленим кольором) заданий display: flex; flex-direction: column; для завдання напряму контенту. Дочірнім блокам задані стилі flex: 0 0 auto; для блоку, для якого відома висота, і flex: 1 0 auto; для блоку, який бодет розтягуватися на все вільне місце. «1» для другого блоку в даному випадку означає «жадібність», тобто більш жадібний блок займає більше місця, ніж менш жадібний, а оскільки в даному випадку у менш жадібного задана висота (може бути задана максимальна висота), то більш жадібний блок займає все вільне місце.

Додамо контент в нижній блок
Для додавання скролла тут досить вказати overflow: auto;

image
Додамо контент у верхній блок
Тут так просто, як з нижнім блоком, не вийде. Все тому, що flex враховує її та висоту контенту.

image
Щоб вирішити цю проблему, контент необхідно орієнтувати абсолютно (position: absolute;) і задати йому властивості top, right, bottom, left рівними нулю (щоб розтягнути його за розмірами блоку)

image
Тепер блок займає потрібний нам розмір, однак контент вилазить з нього. Для вирішення цієї проблеми необхідно батьківському для контенту блоку задати position: relative; overflow: auto;

image
Вуаля, ми отримали два блоку з скроллом, один з яких має максимальну висоту, а другий розтягується по всьому вільного місця.

image
Результат (HTML):
<div class="container">
<div class="first-child">
<div class="first-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div> 
</div>
<div class="second-child">
<div class="second-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</div>
</div>


Результат (SCSS)
.container {
display: flex;
flex-direction: column;
width: 150px;
height: 200px;
background-color: #A5D6A7;

.first-child { 
flex: 1 0 auto;
position: relative;
overflow: auto;
width: 125px;
box-sizing: border-box;
background-color: #90CAF9;

.first-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 5px;
}
}

.second-child {
flex: 0 0 auto;
width: 125px;
max-height: 75px;
padding: 5px;
box-sizing: border-box;
overflow: auto;
background-color: #CE93D8;
}
}


p.s. Працюючий приклад можна подивитися тут
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.