Evitar que la imagen se expanda caja flexible horizontal

ingrese la descripción de la imagen aquí

Tengo una caja flexible horizontal con 3 columnas. La columna negra (1/3 a la izquierda) es una imagen, la columna blanca (1/3 en el centro) es texto y la columna azul (1/3 a la derecha) es texto.

El problema es que las columnas de texto son tan altas como la franja negra que se superpone a los cuadros blancos/azules. El problema que sucede es que mi imagen (columna negra a la izquierda) estira las columnas de texto para volverse tan grande como ella misma.

Supongo que la imagen automáticamente quiere conservar la relación de aspecto y esto afecta la altura total del flexbox.

Mi objetivo es: me gustaría mantener el flexbox tan alto como la columna de texto más grande, pero la columna de la imagen no debería hacer crecer el flexbox más alto. En Tailwind, agregué object-cover y object-center en la imagen (la idea es que la imagen llene la franja gris en el cuadro negro, cubriéndolo). Básicamente, la imagen debe tener las dimensiones del cuadro gris a través del ajuste de objetos.

He intentado establecer la altura de la imagen en contenido máximo y jugar con todo tipo de valores de altura, pero aún no he encontrado una solución decente. ¿Alguien puede ayudar?

<div class="flex items-center h-full">
    <div class="w-1/3 black">
        <img class="max-h-max object-cover object-center" />
    </div>
    <div class="w-1/3 white">
        <p>Short Text</p>
    </div>
    <div class="w-1/3 blue">
        <p>Short Text</p>
    </div>
</div>
Answer

Eliminar la items-centerclase hace que los elementos flexibles tengan la misma altura. Para evitar que imgcambie la altura de la columna de la izquierda, su posición debe ser absolute. Para definir la posición de imgla etiqueta principal debe ser relative. Se añaden dos clases de translate-x-1/2y right-1/2para traer el imgcentro.

<script src="https://cdn.tailwindcss.com/"></script>
<div class="flex">
    <div class="w-1/3 bg-stone-200 relative">
        <img class="absolute translate-x-1/2 right-1/2 h-full" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png" />
    </div>
    <div class="w-1/3 bg-stone-50">
        <p>Short Text</p>
    </div>
    <div class="w-1/3 bg-blue-900">
        <p>Short Text</p>
    </div>
</div>