What I need :
- an app that takes the entire screen (
height: 100vh) - a navigation bar at the top
- 2 boxes aside that take the remaining of the height
- if one content is too small, the box still takes the remaining height
- if one content is too big, the box becomes scrollable
- there is a shadow around the boxes. This part is important because it prevents me from using
overflow:hiddenwhere I want
So, here is an idea about what it should look like :
Image may be NSFW.
Clik here to view.
Up to now, I implemented it with some flexboxes. The problem comes when the violet part becomes too big. The content overflows instead of making the box scrollable and I fail to understand why the height is not calculated right
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Test overflow</title></head><style> html, body { padding: 0; margin: 0; } .screen-container { height: 100vh; box-sizing: border-box; padding: 50px; display: flex; flex-direction: column; gap: 20px; } .shadow-panel { overflow-y: auto; box-shadow: 0 0 50px blue; border-radius: 50px; } nav { box-sizing: border-box; padding: 20px; } .content-panel { color: white; height: 2000px; padding: 50px; background-color: blueviolet; }</style><body><div class="screen-container"><nav class="shadow-panel"> Navigation bar</nav><main style="flex: 1; gap: 20px; display: flex;"><div class="shadow-panel" style="flex:1"><div class="content-panel"><p>If the size of this element is too big, the content will overflow dispite of `overflow-y:auto`</p><p>And placing `overflow:hidden` on the `main` element is not an option as it would break the shadow</p></div></div><div class="shadow-panel" style="flex:1"><div class="content-panel"> Content</div></div></main></div></body></html>