I want to create a "dashboard" page that uses all the available space in the browser window. The browser window will be divided into two equal-width sides. The right side space will contain a slideshow. Images that are larger than the available space should be scaled down to fit and be centered within the space.
As illustrated in the snippet, the webpage is styled to prevent body scrolling. The body contains a two-column gridbox whose dimensions are 1fr & 1fr. The righthand griditem <right-panel> is a flexbox. This in turn contains a flexbox <picture-box> containing an <img>.
Be sure to click "Full-page" link for snippet and enlarge browser window if necessary.
I can't figure out what I need to do to allow the <picture-box> to expand to the size of <right-panel>. The image does shrink correctly in both height and width to fit when the picture box dimensions are specified in absolute units.
/* Slideshow generates rectangles of various dimensions */const duration = 1500; // time (msec) to display each slideconst sleep = ms => new Promise(r => setTimeout(r, ms));const sizes = [ [4000, 500, "Oversize horizontal"], [1000, 4000, "Oversize vertical"], [400, 300, "Should fit"], [100, 200, "Very small"], [4000, 4000, "Oversize square"]];async function show_slide_test(duration, min = 0, max = 0) { let n = 0; const my_img = document.querySelector('#slide-div-img'); let my_randomizer; while (true) { let size_index = n++ % sizes.length; let w = sizes[size_index][0]; let h = sizes[size_index][1]; let desc = sizes[size_index][2]; let my_randomizer = `https://placehold.co/${w}x${h}/orange/black/png?text=${desc}\\n${w}+x+${h}+px`; try { const my_response = await fetch(my_randomizer); const my_blob = await my_response.blob(); URL.revokeObjectURL(my_img.src); const my_url = URL.createObjectURL(my_blob); my_img.src = my_url; await sleep(duration); } catch (my_error) { console.error('Error: ', my_error); break; } }}* { box-sizing: border-box;}html { height: 100%; width: 100%;}body { outline: 4px dashed red; outline-offset: -4px; height: 100%; /* limit to height of html */ width: 100%; margin: 0; /* prevent body from shifting */ padding: 0; overflow: hidden; /* prevents any body scroll */}/* Divide body into a grid of 2 columns */panels { background: blue; min-height: 100%; display: grid; grid-template-columns: 50fr 50fr; gap: 2em;}/* Left-hand panel */left-panel { background: pink;}/* Right-hand panel */right-panel { background: yellow; display: flex; justify-content: center; align-items: center;}/* Flex item inside right panel flexbox */picture-box { background: green; display: flex; justify-content: center; align-items: center; /* what magic values will make picture box grow to size of right-panel? */ width: 600px; height: 400px;}.scaled-picture { outline: 8px double black; outline-offset: -8px; max-width: 100%; max-height: 100%;}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><body onload="show_slide_test(duration)"><panels><left-panel></left-panel><right-panel><picture-box><!-- This is a placeholder for the image --><img class="scaled-picture" id="slide-div-img"></picture-box></right-panel></panels></body></html>