Image is squeezed in flex

问题

The first Image is squeezed in a flex layout, I'm assuming this must be due to the long paragraph in the right column, but not sure what's causing it.

How to fix this so that image is not squeezed and the right column should grow to take remaining space?

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex p-4">
  <div class="border">
    <img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
  </div>
  <div class="flex-col">
    <div class="font-medium cursor-pointer hover:underline">Duncan Smith</div>
    <p class="flex-shrink-0 border-gray-300">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi</p>
  </div>
</div>

回答1:

add flex-shrink-0 to the image and you can also get rid of the container:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex p-4">
  <img class="w-8 h-8 border flex-shrink-0 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
  <div class="flex-col">
    <div class="font-medium cursor-pointer hover:underline">Duncan Smith</div>
    <p class="flex-shrink-0 border-gray-300">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi</p>
  </div>
</div>

回答2:

I've updated your code a little. The main problem was that you've put the flex-shrink-0 in the wrong place.

<div class="flex p-4 space-x-2">
  <div class="border flex-shrink-0">
    <img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
  </div>
  <div>
    <div class="font-medium cursor-pointer hover:underline">Duncan Smith</div>
    <p class="border-gray-300">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi</p>
  </div>
</div>

来源：https://stackoverflow.com/questions/65715862/image-is-squeezed-in-flex

标签

css

tailwind-css