CSS - element with fixed height and width - shrink when parent is smaller than element

Issue

Is it possible to set the height and width of an element and have it shrink when the parent height is smaller than the child height?

I have a reusable icon button component and i want it to have a specific height and width as it is a square. But when used inside an input element i want it to shrink so it will only use the available space/height of the input element.

Here is a little demo of it.

svg {
  width: 1em;
  height: 1em;
}

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


<div class="bg-green-200 h-screen p-4 flex flex-col gap-4 items-start">
  <button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl max-h-16 h-full w-16 bg-white hover:bg-green-50 text-gray-400">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
  </button>

  <div class="mt-1 rounded border-2 border-transparent focus-within:ring-green-500 focus-within:border-green-500 bg-white flex items-center gap-1 p-4 text-lg h-16">
    <input id="downshift-1-input" aria-autocomplete="list" aria-controls="downshift-1-menu" aria-labelledby="downshift-1-label" autocomplete="off" class="block w-full focus:outline-none" value="" />
    <div class="flex items-center justify-center children:any-h-full h-full text-2xl">
      <div class="flex items-center gap-1 text-gray-400">
        <button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl max-h-16 h-full w-16 bg-white hover:bg-green-50 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button
        ><span
          ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path></svg
        ></span>
      </div>
    </div>
  </div>
</div>

I managed to get it to work for the height, but now the width is the problem when i use it in the input element. I tried setting it with max-width, but didn't succeed and i'm a little stuck right now.

Thanks in advance!!

Solution

Thanks to the input of Ala Mouhamed and silvenon i managed to get it to work by using aspect-ratio and a fixed height. When using it inside the input field i just pass h-auto to the icon button and override the fixed height. This way it will adjust to the height of the input -> Tailwind Play Demo

svg {
  width: 1em;
  height: 1em;
}

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


<div class="bg-green-200 h-screen p-4 space-y-4">
  <button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl h-16 aspect-square bg-white hover:bg-green-50 text-gray-400">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
  </button>

  <div class="mt-1 rounded border-2 border-transparent focus-within:ring-green-500 focus-within:border-green-500 bg-white flex items-center gap-1 p-4 text-lg h-16">
    <input id="downshift-1-input" aria-autocomplete="list" aria-controls="downshift-1-menu" aria-labelledby="downshift-1-label" autocomplete="off" class="block w-full focus:outline-none" value="" />
    <div class="flex items-center justify-center children:any-h-full h-full text-2xl">
      <div class="flex items-center gap-1 text-gray-400">
        <button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl h-16 h-auto aspect-square bg-white hover:bg-green-50 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button
        ><span
          ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path></svg
        ></span>
      </div>
    </div>
  </div>
</div>
</div>

Answered By - knoefel