0

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 class="container">
      <div class="flex flex-nowrap flex-col justify-between bg-red-500" style="height: 300px;">

        <div class="border">lorem ipsum dolor</div>
        <div class="border">lorem ipsum dolor</div>
        <div class="border">lorem ipsum dolor</div>
        <div class="border">lorem ipsum dolor</div>
        <div class="border shrink max-h-full w-auto"><img class="max-h-full object-contain" src="https://picsum.photos/id/237/200/300" /></div>
        <div class="border">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?

ThS
  • 4,597
  • 2
  • 15
  • 27
caspermc
  • 444
  • 2
  • 5
  • 11
  • remove `height: 300px` from `div.flex-col`. Unless you provide more details, that's what i came up with... – ThS Oct 05 '22 at 11:58
  • that'S the point. i have a flex box with a fixed height. I want the image to shrink, so that all divs fit inside the flex box. – caspermc Oct 05 '22 at 12:12

2 Answers2

1

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 class="container">
      <div class="flex flex-nowrap flex-col justify-between bg-red-500" style="height: 300px;">

        <div class="border">lorem ipsum dolor</div>
        <div class="border">lorem ipsum dolor</div>
        <div class="border">lorem ipsum dolor</div>
        <div class="border">lorem ipsum dolor</div>
        <div class="border shrink overflow-auto"><img class="max-h-full object-contain" src="https://picsum.photos/id/237/200/300" /></div>
        <div class="border">lorem ipsum dolor</div>
      </div>
    </div>
</body>
</html>
caspermc
  • 444
  • 2
  • 5
  • 11
0

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

Ibrahim
  • 1
  • 1