顺风CSS-具有固定高度和宽度的元素-当父元素小于元素时收缩

Question

是否可以设置元素的height和width，并在父height小于子height时使其收缩？

我有一个可重复使用的图标按钮组件，我希望它有一个特定的height和width，因为它是一个正方形。但是当在输入元素内部使用时，我希望它收缩，这样它将只使用输入元素的可用空间/高度。

这里有一个小演示。

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>

我设法让它为height工作，但现在当我在输入元素中使用width时，它就成了问题。我试着用max-width设置它，但没有成功，我现在有点卡住了。

提前感谢！！

Answer 1

您可以使用新的css属性"纵横比"；，并将其设置为"0"；1/1"，当元件的宽度或高度根据其容器而变化时，它将保持成比例的尺寸。

查看css技巧了解更多详细信息。

Answer 2

要扩展现有答案，您需要在其上设置一个固定的宽度，但您需要根据纵横比来考虑此元素的维度，在您的情况下是1:1。定义它的一种方法是对aspect-ratio属性使用Tailwind的实用程序。您需要确保将h-full一直传播到您的元素，以便最终在该元素上设置h-full具有任何效果。

您需要进行的实际更改是：

1. 将h-full添加到包裹第二个关闭按钮的Flex容器中，这将使该按钮上的h-full生效
2. 从两个关闭按钮中删除w-16，因为您希望宽度取决于高度
3. 相反，添加aspect-square，这将使宽度与高度相同

如果您不能接受aspect-ratio的浏览器支持，则可以使用@tailwindcss/aspect-ratio插件提供的填充破解。

Answer 3

您可以使用"100%"；对于CCD_ 20，并且对于max-height和CCD_。这样，子对象不会比父对象大，但也不会比定义的最大值大。

Answer 4

由于Ala Mouhamed和silvenon的输入，我使用aspect-ratio和固定高度成功地使其工作。当在输入字段中使用它时，我只需将h-auto传递给图标按钮并覆盖固定高度。以这种方式，它将调整到输入的高度->顺风播放演示

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>