NEXT Image: Shrinking inside flexbox with tailwind

Question

I am using NEXT Image component to Fit in with a flex box without shrinking. However, based on the content that is there in the other element, it keeps shrinking:

Here's my code:

import React from 'react';
import Image from 'next/image';
type Props = {
  imageUrl?: string;
  senderName: string;
  newMessageCount?: number;
  latestMessage: string;
};

export default function MessageBox({
  imageUrl,
  senderName,
  newMessageCount,
  latestMessage,
}: Props) {
  const isNewMessageDefined = newMessageCount ? true : false;
  const newMsgValue =
    latestMessage.length > 80
      ? `${latestMessage.slice(0, 80)}...`
      : latestMessage;
  return (
    <div className='flex w-full gap-2' aria-label='Funfuse-Message-Container'>
      <Image
        alt='Message Image'
        src={imageUrl ?? '/funfuse/avatar-02.jpg'}
        className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
        height={80}
        width={80}
        objectFit='cover'
        objectPosition='center'
      />
      <div className='flex flex-col'>
        <div
          aria-label='Funfuse-Message-Header'
          className='flex flex-row items-center gap-2'>
          <h2 className='text-xl text-black'>{senderName ?? 'John Doe'}</h2>
          {isNewMessageDefined && (
            <div className='h-[1.2rem] w-[1.2rem] rounded-full relative bg-funfuse'>
              <label className='absolute text-xs text-white transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>
                {newMessageCount}
              </label>
            </div>
          )}
        </div>
        <div aria-label='Funfuse-Message-Body'>
          <label className='text-sm font-semibold text-gray-400'>
            {newMsgValue}
          </label>
        </div>
      </div>
    </div>
  );
}

Can someone help me identify how to prevent this issue as I always want my image to be of the size and never shrink. I tried using the property: flex-shrink: 0 but that didn't work too.

Answer 1

Here is another fix that worked for me in a similar case. I wrapped the <Image /> component around a div with position: relative;width:80px;height:80px, removed width and height properties from the <Image /> component and added layout="fill" instead.

So instead of this

<Image
  alt='Message Image'
  src={imageUrl ?? '/funfuse/avatar-02.jpg'}
  className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
  height={80}
  width={80}
  objectFit='cover'
  objectPosition='center'
/>

You would have something like this

<div className="relative w-[80px] h-[80px]">
 <Image
   alt='Message Image'
   src={imageUrl ?? '/funfuse/avatar-02.jpg'}
   className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
   layout="fill"
   objectFit='cover'
   objectPosition='center'
 />
</div>