У меня проблема с firefox, связанная с изгибом и переполнением. Я знаю, что исправить это добавить min-height: 0 к родительскому элементу, но я не могу заставить его работать. Я попытался добавить min-height: 0 для каждого предка прокручиваемых элементов, но я не могу заставить его работать в Firefox (Chrome в порядке). Вот код:
https://codepen.io/anon/pen/YdbwqE
.scroll-y {
overflow-y: scroll;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> Formatted HTML:
<body>
<div class="container-fluid h-100 d-flex flex-column">
<div class="row flex-shrink-0">
<div class="col p-0">
<h3>Navbar</h3>
</div>
</div>
<div class="row flex-lg-grow-1">
<div class="col-12 col-lg-2 d-none d-lg-block">
<div class="h-100 d-flex flex-column">
<div class="flex-shrink-0">Header</div>
<div class="flex-grow-1 h-100 scroll-y">
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
<div>Sidebar</div>
</div>
<div class="flex-shrink-0">Footer</div>
</div>
</div>
<div class="col-12 col-lg-10">
<div class="h-100 scroll-y">
<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>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>
</div>
</div>
</div>
</body>