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
*,::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>