- I want #item-3 to fill the remaining vertical space.
- I cannot modify #root, #item-1, or #item-2. Only #item-3 can be changed.
- For performance reasons, I would like to solve this problem using only CSS without relying on JavaScript.
I am trying to make an element fill the remaining vertical space in a Flexbox layout without affecting other elements. Below is my current HTML and CSS:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style> body { padding: 0px; margin: 0px; height: 100vh; background-color: gray; } #root { display: flex; flex-wrap: wrap; flex-grow: 1; align-content: flex-start; align-items: flex-start; width: 100%; max-width: 100%; height: 100%; max-height: 100% !important; background-color: green; } #item-1 { flex: 1 1 auto; align-self: flex-start; width: 40%; min-width: 100px; max-height: 100% !important; } #item-2 { flex: 1 1 auto; align-self: flex-start; width: 60%; min-width: 100px; max-height: 100% !important; } #item-3 { flex: 1 1 auto; align-self: flex-start; width: 100%; min-width: 100px; max-height: 100% !important; background-color: red; }</style></head><body><div id="root"><div id="item-1">Dynamic content with uncertain height 1</div><div id="item-2">Dynamic content with uncertain height 2</div><div id="item-3">Dynamic content with uncertain height 3</div></div></body></html>