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

Question

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!!

Answer 1

You can use the new css property "aspect-ratio", and set it to "1/1", it will maintain proportional dimensions while the elements width or height changes depending on its container.

check css-tricks for more details.

Answer 2

Instead of using fixed values, you could use "100%" for height and width and use fixed pixel values for max-height and max-width . That way the child won't get larger than the parent, but also not larger than the max-values define.

Answer 3

To expand on existing answers, you're setting a fixed width on it, but you need to think about the dimensions of this element in terms of aspect ratio , which in your case is 1:1 . One way to define it is using Tailwind's utilities for the aspect-ratio property . You need to make sure to propagate h-full all the way to your element so that finally setting h-full on that element has any effect.

The actual changes you need to make is:

1. add h-full to the Flex container that's wrapping the 2nd close button, this will give effect to the h-full on that button
2. remove w-16 from both close buttons, because you want the width to depend on the height
3. instead add aspect-square , which will make width the same as height

If aspect-ratio 's browser support isn't acceptable to you, the alternative is to use the padding hack provided by the @tailwindcss/aspect-ratio plugin.

Answer 4

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>