是否有可能設定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，但沒有成功，我現在有點卡住了。
提前致謝！！
uj5u.com熱心網友回復：
您可以使用新的 css 屬性 "aspect-ratio"，并將其設定為 "1/1" ，它將保持比例尺寸，而元素的寬度或高度根據其容器而變化。
檢查css-tricks以獲取更多詳細資訊。
uj5u.com熱心網友回復：
要擴展現有答案，您要為其設定固定寬度，但您需要根據寬高比考慮此元素的尺寸，在您的情況下為1:1. 定義它的一種方法是對aspect-ratio屬性使用 Tailwind 的實用程式。您需要確保一直傳播h-full到您的元素，以便最終h-full在該元素上設定有任何效果。
您需要進行的實際更改是：
- 添加
h-full到包裝第二個關閉按鈕的 Flex 容器中，這將使h-full該按鈕上的效果生效 w-16從兩個關閉按鈕中洗掉，因為您希望寬度取決于高度- 而是 add
aspect-square，這將使寬度與高度相同
如果您不接受aspect-ratio的瀏覽器支持，另一種方法是使用插件提供的填充技巧@tailwindcss/aspect-ratio。
uj5u.com熱心網友回復：
除了使用固定的值，可以使用“100％”的height and width，并使用固定的像素值max-height和max-width。這樣孩子不會變得比父母大，但也不會比最大值定義的大。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/397358.html