I have a behavior that puzzles me. The code below is the result of debugging a larger app. I know I can simplify it and make it work. However, I would like to understand and learn.
There are two rectangles (height: 100px and height: 400px) stacked on top of each other in a column flex box. When the window gets smaller than 500px, the browser will add a scrollbar. Ok. But if it gets smaller than 400px, the blue box shows a scrollbar.
I would have expected either the body-scrollbar or the blue-box-scrollbar, but not both. Can anyone explain
HTML
<code>*,
::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;
}</code>
<code>*,
::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;
}</code>
*,
::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;
}<code><!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></code>
<code><!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></code>
<!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>