Css min-height: fit-content не работает с изменением размера
<div class = "h-fit w-fit min-h-fit min-w-fit resize overflow-hidden bg-gray-200">
<div> Content goes here.</div>
<div> Content goes here.</div>
<div> Content goes here.</div>
<div> Content goes here.</div>
<div> Content goes here.</div>
</div>
Выше приведен минимальный пример, протестированный в firefox и edge.
Несмотря на то, что он использует попутный ветер, я пробовал и встроенные стили.
min-w-fit (минимальная ширина: fit-content) работает как положено, но эквивалент минимальной высоты — нет.
Ответы 2
Чтобы это работало, вам нужно установить статическое значение, например min-h-[200px], но вы не хотите этого делать, поэтому обходной путь будет следующим:
Удалите min-h-fit и после рендеринга элемента получите его высоту с помощью JS и установите ее как статическую минимальную высоту.
<div id = "parentElement" class = "h-fit w-fit min-w-fit resize overflow-hidden bg-gray-200">
<div> Content goes here.</div>
<div> Content goes here.</div>
<div> Content goes here.</div>
<div> Content goes here.</div>
</div>
<script>
const height = document.getElementById('parentElement').offsetHeight;
document.getElementById('parentElement').style.minHeight = `${height}px`;
</script>
Я не думаю, что это ошибка. В данном случае, как указано в Что означает минимальная высота: максимальное содержание? по поперечной оси (здесь высота) min-height:fit-content разрешится на min-height:0. Именно поэтому min-width:fit-content работает.
Свойство min-height: fit-content в CSS предназначено для того, чтобы сделать минимальную высоту элемента ровно настолько, чтобы соответствовать его содержимому. Однако он может работать не так, как ожидалось, в сочетании с некоторыми другими свойствами, такими как изменение размера. Если у вас возникли проблемы с min-height: fit-content при изменении размера элемента.
Подробнее о минимальной высоте и соответствующем контенте вы можете прочитать здесь и здесь.
Я до сих пор не понимаю, почему не работает fit, возможно, это неустраненная ошибка, но это сработало, спасибо!