CODEWITHSUNDEEP
htmlcsstailwind-css
Artur Müller Romanov
Artur Müller Romanov

Reputation: 5841

How to force child-div to "stretch" parent-flexbox (like img element does)?

I have a flexbox element with images that overflow and can be accessed via horizontal scroll bar:

<div class="flex gap-2 overflow-x-scroll">
  <img class="rounded cursor-pointer" src="@/images/image.png" alt="meet-loaf image">
  <img class="rounded cursor-pointer" src="@/images/image.png" alt="meet-loaf image">
  <img class="rounded cursor-pointer" src="@/images/image.png" alt="meet-loaf image">
</div>

This happens because the flexbox div gets "stretched" by the img elements over the right edge and hidden by overflow prop.

enter image description here

Now I need to wrap the img elements into divs because I need to do an overlay with icons for each image. Problem is that the flexbox goes to width: 100% of its parent, as soon as the child elements are divs instead of img, preventing the overflow:

<div class="flex gap-2 overflow-x-scroll">
  <div><img class="rounded cursor-pointer" src="@/images/image.png" alt="meet-loaf image"></div>
  <div><img class="rounded cursor-pointer" src="@/images/image.png" alt="meet-loaf image"></div>
  <div><img class="rounded cursor-pointer" src="@/images/image.png" alt="meet-loaf image"></div>
</div>

enter image description here

img elements have display: inline by default and I tried adding that to the div elements but it doesn't change anything. Any idea how to replicate above overflow behavior?

Upvotes: 0

Views: 30

Answers (1)

Damzaky
Damzaky

Reputation: 10824

I'm not an expert in tailwind, but it seems like in tailwind, <img> tag has default max-width: 100% that causes it to not have size bigger than a size that's determined by its parent (the <div> which width is determined by parent's flex), to fix this, you only need to add max-w-none class to the images, like this:

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex gap-2 overflow-x-scroll">
  <div><img class="rounded cursor-pointer max-w-none" src="https://via.placeholder.com/200x105" alt="meet-loaf image"></div>
  <div><img class="rounded cursor-pointer max-w-none" src="https://via.placeholder.com/200x105" alt="meet-loaf image"></div>
  <div><img class="rounded cursor-pointer max-w-none" src="https://via.placeholder.com/200x105" alt="meet-loaf image"></div>
  <div><img class="rounded cursor-pointer max-w-none" src="https://via.placeholder.com/200x105" alt="meet-loaf image"></div>
</div>

Upvotes: 2

Related Questions