Допомога у програмуванні, відповіді на питання / Html / Як уникнути помилки в Chrome з нульовою висотою вкладеного флексокса? - html, css, google-chrome, flexbox

Як уникнути помилки Chrome з вставленою флексбоком нуля? - html, css, google-chrome, flexbox

Я зіткнувся з дивною ситуацією з флексбокомде я хотів би мати вкладений гнучкий контейнер з іншим напрямком згинання, але чомусь контейнер займає висоту 0, внаслідок чого елементи перекриваються.

https://jsfiddle.net/4co25fau/

Фрагмент:

body, html, main {
height: 100%;
}

.flex {
display: flex;
}

.flex-row {
flex-direction: row
}

.flex-column {
flex-direction: column
}

.flex-grow {
flex-grow: 1;
}

.overflow-y-auto {
overflow-y: auto;
}

<main class="flex flex-column">
<div class="flex flex-row">
<h1>TEST</h1>
<h1>TEST2</h1>
</div>
<h2>SUBTITLE</h2>
<div class="flex-grow overflow-y-auto">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>

</div>
</main>

Це працює в Firefox, але не в Chrome. Чи є якісь обхідні шляхи, щоб цього уникнути?

Відповіді:

1 для відповіді № 1

Ви можете просто скористатися скороченням flex:1; щоб зробити його простим (і уникати різної поведінки від браузера до браузера), оскільки контейнер, мабуть, заповнює все, що залишилося.

https://jsfiddle.net/4co25fau/2/

Для безпеки я б заперечував мінімальну висоту основного контейнера, щоб уникнути переповнення, перекриття та зменшення до 0 деяких контейнерів.

@RahatAhmed написав: Щоб уточнити, flex: 1 також встановлює flex-basis: 100% як за замовчуванням, що є конкретним правилом, яке виправляє проблему

0 для відповіді № 2

Якщо ви хочете, щоб він відповідав цілому екрану

height:100vh;

Вибачте, я б прокоментував, але мені не вистачає представника.

0 для відповіді № 3

Видалено main від body, html {} & додано overflow: hidden до нього, потім додав height: 100% до .flex так само.

див