ARTICLE AD BOX
I am trying to render two div containers side-by-side. The left container should fit the height of the body, and both the container and the body should vertically expand when its content overflows. The right container should fit the height of the body, and its content should scroll internally when it overflows. In other words, both containers should fill the height of the page, but the page should only expand to the height that the left container overflows.
<!DOCTYPE html> <html lang="en-CA"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test</title> <link href="test.css" rel="stylesheet"> </head> <body> <div id="left-container"> <div></div> </div> <div id="right-container"> <div></div> </div> </body> </html> body { margin: 0; min-height: fit-content; height: 100vh; width: 100vw; display: flex; flex-direction: row; overflow-x: hidden; background-color: #CCF; } #left-container { width: 40%; min-height: fit-content; height: 100%; background-color: #030; color: #FFF; } #right-container { width: 60%; height: 100%; overflow: auto; background-color: #300; color: #FFF; } #left-container div { height: 2000px; width: 80%; margin: auto; background-image: linear-gradient(#082, #06A); } #right-container div { height: 3000px; width: 80%; margin: auto; background-image: linear-gradient(#820, #990); }(jsfiddle)
The right container scrolls as expected, but the left container fails to expand to fit its contents. Furthermore, when inspecting the page, it appears that the body retains the viewport height as well.
Why does min-height: fit-content not fit the content? To my understanding, height is smaller than min-height in this situation, so min-height should take precedence.
Alternatively, when I remove height: 100vh or use height: fit-content in the body, it expands to fit the overflow of both the left and right containers, which is not desired. Also, the left container only fits its own content when the body uses display: flex, but fits 100% of the body height when using display: grid.
Why does height: 100% not always fit the height of the parent in flex row elements?
Is it possible to render these two containers as intended using only html and css?
