I had a webpage which was working perfectly and resized the child canvas element (the checkerboard with a bunny), while keeping its 1:1 aspect ratio with a help of ResizeObserver, when the browser window width decreased:
Then I have added a "horizontalFlexContainer" div element around all the elements of that page, so that I could add a grey menu with 4 entries on the left side.
Unfortunately, this has resulted in the issue that the "verticalFlexContainer" refuses to shrink, when the browser width decreases:
Here is my problematic keep-aspect-ratio.html using the main.css
Does anybody please have a recommendation, what is suddenly causing the "resistance" to shrink?
const parentElement = document.getElementById("parent"); const childElement = document.getElementById("child"); const app = new PIXI.Application({ backgroundColor: 0xccffcc, width: 800, height: 800, view: childElement, }); const resizeObserver = new ResizeObserver((entries) => { for (let entry of entries) { const { width, height } = entry.contentRect; const minDimension = Math.min(width, height); // maintain the 1:1 aspect ratio of the child element childElement.style.width = `${minDimension}px`; childElement.style.height = `${minDimension}px`; } }); resizeObserver.observe(parentElement); const background = new PIXI.Graphics(); for (let i = 0; i < 8; i++) { for (let j = 0; j < 8; j++) { if ((i + j) % 2 == 0) { background.beginFill(0xccccff); background.drawRect(i * 100, j * 100, 100, 100); background.endFill(); } } } app.stage.addChild(background); const texture = PIXI.Texture.from("https://pixijs.com/assets/bunny.png"); const bunny = new PIXI.Sprite(texture); bunny.anchor.set(0.5); bunny.x = 50; bunny.y = 50; bunny.width = 100; bunny.height = 100; app.stage.addChild(bunny);html,body,h3,ul { margin: 0; padding: 0; text-align: center; overflow: hidden;}nav a.active { color: red;}div.horizontalFlexContainer { display: flex; justify-content: space-between; align-items: stretch;}div.verticalFlexContainer { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; height: 100vh;}/* the parent contains: just the canvas element, which observes the parent dimensions */div.parent { border: 4px solid red; flex: 1; /* center the only child element: the canvas */ display: flex; align-items: center; justify-content: center; /* prevent the canvas child disrupting the layout */ overflow: hidden;}canvas.child { background-color: yellow; border: 4px green dotted; /* draw the border inside of the canvas element */ box-sizing: border-box;}div.hint,div.status { background: lightblue; font-style: italic; text-align: center;}<script src="//cdn.jsdelivr.net/npm/pixi.js-legacy@7/dist/pixi-legacy.min.js"></script><div class="horizontalFlexContainer"><div style="background: lightgrey"><h3>Select a game!</h3><nav><ul><li>Game 1</li><li>Game 2</li><li>Game 3</li><li>Game 4</li></ul></nav></div><div style="flex-grow: 1"><div class="verticalFlexContainer"><div class="status">Game #1 Score1:Score2</div><div class="parent" id="parent"><canvas class="child" id="child"></canvas></div><div class="hint">A game hint to do this and that...</div></div></div></div>