I have a question about flexbox, I have a very basic layout with 5 rows in one column with 100% width, 4 of these rows have a fixed height, one row is dynamic (main-section) and it should take all the available space, the wrapper has also a fixed height (100dvh), this is playground
https://codesandbox.io/p/sandbox/qxm3dv
Given I've set the wrapper height to be 100dvh, in theory all should be visible without scrolling (and that's my goal).
If I comment the image all works fine, but with the image the main-section takes too much space, why the image is increasing the height while it should just take the available space based on the parent wrapper?
* { margin: 0; padding: 0; box-sizing: border-box;}body { height: 100dvh;}.wrapper { border-bottom: 5px solid black; background-color: orange; flex-direction: column; align-items: stretch; height: 100%; display: flex;}.header { background-color: antiquewhite; height: 100px; width: 100%; flex-shrink: 0;}.main-section { background-color: aquamarine; padding: 2rem; width: 100%; flex: 1;}.main-section img { object-fit: cover; width: 100%;}.section-1 { background-color: blueviolet; height: 100px; flex-shrink: 0;}.section-2 { background-color: brown; height: 100px; flex-shrink: 0;}.section-3 { background-color: violet; height: 100px; flex-shrink: 0;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="styles.css" /></head><body><div class="wrapper"><div class="header">a</div><div class="main-section"><img src="https://th.bing.com/th/id/OIG1.CgTbIrO0vUXLNU28HMdC" /></div><div class="section-1">b</div><div class="section-2">c</div><div class="section-3">d</div></div></body></html>thanks