Question 42547 in Html Question posted in
Some basic documentation can be found here.

How to prevent an image from leaving the main container? – Html

I have a flex container that inside has 3 columns, the first column (red) is a container with an image and below a scroll of images to select and see in the main image above.

The problem is that the image, which is inside the blue container, comes out of the main container (red) and cannot be inside the red container, even if I use the flex: 1 1 0% for both blue containers.

Image

<div class="p-2 lg:p-6 relative inset-0 overflow-y-auto min-w-0 flex flex-col w-full h-full">
  <div class="flex flex-row items-center justify-center w-full h-96 gap-x-1">
    <div class="bg-red-700 p-1 flex-1 h-full">
      <div class="flex flex-col h-full">
        <div class="flex-1 bg-blue-400 p-1">
          <img class="w-full rounded-lg shadow" src="https://via.placeholder.com/150x300" />
        </div>
        <div class="flex-1 bg-sky-600 p-1">asdwasdw</div>
      </div>
    </div>
    <div class="bg-primary-600 p-1 flex-1 h-full"></div>
    <div class="bg-alter-600 p-1 flex-1 h-full"></div>
  </div>
</div>

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

2

Answers


  1. 0

    what i get from your problem is that the image is not in the red box.

    so in the red box class, I just change the h-full to h-fit
    based on the tailwind docs (https://tailwindcss.com/docs/height)

    I hope it helps

    Login or Signup to reply.
  2. 0 
    <div class="p-2 lg:p-6 relative inset-0 overflow-y-auto min-w-0 flex flex-col w-full h-full">
  <div class="flex flex-row items-center justify-center w-full h-96 gap-x-1 overflow-hidden">
    <div class="bg-red-700 p-1 flex-1 h-full">
      <div class="flex flex-col h-full">
        <div class="flex-1 bg-blue-400 p-1 overflow-hidden">
          <img class="w-full rounded-lg shadow" 
           src="https://via.placeholder.com/150x300" />
        </div>
        <div class="flex-1 bg-sky-600 p-1">asdwasdw</div>
      </div>
    </div>
    <div class="bg-primary-600 p-1 flex-1 h-full"></div>
    <div class="bg-alter-600 p-1 flex-1 h-full"></div>
  </div>
</div>

    You can try the above code I guess it will be fixed

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search