Я создаю панель инструментов с динамическим количеством элементов c справа от страницы, высота которой всегда равна высоте области просмотра.
Панель инструментов разделена на две области, и, если их слишком много элементы включены, верхняя область должна прокручиваться.
Однако, с моим решением, в Firefox полоса прокрутки находится над элементами. В Chrome он рендерится так, как ожидалось, и сдвигает элементы для прокрутки в сторону.
Я искал некоторое время, но мои поисковые слова перекрываются более старыми проблемами, касающимися min-height: 0 и min- ширина: 0 для гибкого дочернего вопроса. Проблема, когда сама полоса прокрутки находится чуть выше содержимого области прокрутки, я не смог найти.
Воспроизведение на JSFiddle: https://jsfiddle.net/3o65an7m/4/
Воспроизведение также скопировано здесь, но imo легче увидеть проблему в JSFiddle:
html {
height: 400px;
}
body, .wrap {
height: 100%;
margin: 0;
}
.wrap {
display: flex;
flex-direction: column;
min-height: 0;
}
.right-bar {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
min-height: 0;
}
.upper {
flex-grow: 1;
overflow-y: auto;
}
.footer {
color: white;
width: 100%;
background: blue;
}
.b {
height: 20px;
width: 20px;
background: red;
margin: 4px;
padding: 4px;
}
<html>
<body>
<div class="wrap">
<div class="right-bar">
<div class="upper">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="lower">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
</div>
<div class="footer">Text</div>
</div>
</body>
</html>
Сравнение изображений; левый FF, правый Chrome. Я хочу, чтобы поведение всегда было таким же видимым в Chrome:
