Scale down image so that it fits inside a static height flexbox-CodePudding

ive got the following structure:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  
    <div >
      <div  style="height: 300px;">

        <div >lorem ipsum dolor</div>
        <div >lorem ipsum dolor</div>
        <div >lorem ipsum dolor</div>
        <div >lorem ipsum dolor</div>
        <div ><img  src="https://picsum.photos/id/237/200/300" /></div>
        <div >lorem ipsum dolor</div>
      </div>
    </div>
</body>
</html>

i want the image to scale down automatically, so that all divs fit inside the flexbox. Obviously right now this isn't working. How can i do that?

CodePudding user response：

Try using flex-direction property set it to column, It means it means all the flex items will be displayed in block.

CodePudding user response：

Ok, i found the answer (via https://epndavis.com/blog/contain-an-image-within-fixed-height-flexbox-grow/. i had to add a overflow-auto to the div containing the image.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  
    <div >
      <div  style="height: 300px;">

        <div >lorem ipsum dolor</div>
        <div >lorem ipsum dolor</div>
        <div >lorem ipsum dolor</div>
        <div >lorem ipsum dolor</div>
        <div ><img  src="https://picsum.photos/id/237/200/300" /></div>
        <div >lorem ipsum dolor</div>
      </div>
    </div>
</body>
</html>