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 >
  <button >
    <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 >
    <input id="downshift-1-input" aria-autocomplete="list" aria-controls="downshift-1-menu" aria-labelledby="downshift-1-label" autocomplete="off"  value="" />
    <div >
      <div >
        <button >
          <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!!

CodePudding user response：

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.

CodePudding user response：

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.

CodePudding user response：

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.