Понимание гибкости, высоты и переполнения
У меня есть поведение, которое меня озадачивает. Код ниже — результат отладки более крупного приложения. Я знаю, что могу упростить это и заставить это работать. Однако мне хотелось бы понять и научиться.
Есть два прямоугольника (высота: 100 пикселей и высота: 400 пикселей), расположенные друг над другом в гибком поле столбца. Когда размер окна станет меньше 500 пикселей, браузер добавит полосу прокрутки. Хорошо. Но если он становится меньше 400 пикселей, в синем поле отображается полоса прокрутки.
Я ожидал либо полосу прокрутки тела, либо полосу прокрутки синего ящика, но не то и другое. Может ли кто-нибудь объяснить
HTML
*,
::before,
::after {
box-sizing: inherit;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
/* overflow: visible; */
}
.full-size {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title>Hi</title>
<base href = "/" />
<link rel = "stylesheet"
href = "style.css" />
<meta name = "viewport"
content = "width=device-width, initial-scale=1" />
</head>
<body>
<div class = "full-size container">
<div style = "width:300px; height: 100px; background-color: green; flex-shrink: 0;">Upper content</div>
<div class = "full-size content">
<div class = "full-size"
style = "overflow: auto; background-color: blue;">
<div style = "width:300px; height: 400px; background-color: yellow;">Lower content</div>
</div>
</div>
</div>
</body>
</html>
Ответы 1
Это связано с использованием каскада height: 100% до элемента content. Внутри вашего контейнера у вас есть элемент с высотой, равной 100px, и еще один с высотой, равной 100%. Логически это приведет к переполнению, но сработает эффект сжатия, и второй элемент станет меньше 100%.
Но на маленьком экране желтый прямоугольник вызовет другой эффект и предотвратит сжатие из-за конфигурации min-height по умолчанию (Почему гибкие элементы не уменьшаются за пределы размера содержимого?) и заблокирует ваш элемент в height: 100%, что вызовет тело - полоса прокрутки, а желтое поле внутри больше height: 100%, что вызывает синюю полосу прокрутки.
Чтобы этого избежать, добавьте min-height: 0 к контенту
html,
body {
margin: 0;
height: 100%;
}
.full-size {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
min-height: 0;
}<div class = "full-size container">
<div style = "width:300px; height: 100px; background-color: green; flex-shrink: 0;">Upper content</div>
<div class = "full-size content">
<div class = "full-size" style = "overflow: auto; background-color: blue;">
<div style = "width:300px; height: 400px; background-color: yellow;">Lower content</div>
</div>
</div>
</div>Теперь синяя рамка всегда будет сжиматься, и вы никогда не получите полосу прокрутки тела.