In the code snippet below, I expect the first and second containers to each occupy 50% of the window height, and I want the first container body to have vertical overflow.
Unfortunately when I put the huge chunk into the first container - it becomes larger than 50% of the page and the auto-overflow doesn't work.
Is there any way to not specify the height?
* { margin: 0; box-sizing: border-box; } .root { height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 16px; } .first-block, .second-block { flex: 1; background-color: aqua; border: 1px solid gray; display: flex; flex-direction: column; } .first-block-header { height: 100px; background-color: yellow; } .first-block-footer { height: 100px; background-color: coral; } .first-block-body { flex: 1; overflow: auto; padding: 16px; } .first-block-content { height: 700px; width: 50px; background-color: purple; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Problem with overflow</title> </head> <body> <div class="root"> <div class="first-block"> <div class="first-block-header"></div> <div class="first-block-body"> <div class="first-block-content"></div> </div> <div class="first-block-footer"></div> </div> <div class="second-block"> </div> </div> </body> </html>
You have to wrap the block content in a div and set overflow-y to scroll in order to mark the entire block content as scrolling, otherwise only the middle part will scroll.
And add
overflow-y: auto;
to the block itself to set it to scroll.Try this: