Почему при переносе строки внутри блока с "width: fit-content", этот блок растягивается на всю ширину родителя?
Пример на codepen: https://codepen.io/Coder10000000000/pen/yLvwmdj
Почему блок .fit растягивается на всю ширину .container? Если ли способ сделать так, чтобы текст занимал всю доступную ширину (как при fit-content у родителя), но при переносе строки занимал ровно такую ширину, которая позволяет вместить текст без переполнения (как при ширине min-content)?
.container {
width: 350px;
height: 100px;
border: 1px solid black;
}
.fit {
width: fit-content;
border: 1px solid red;
}<div class="container">
<div class="fit">рентгеноэлектрокардиографическая фиброэзофагогастродуоденоскопия</div>
</div>Ответы (2 шт):
Автор решения: Dmitry Kozlov
→ Ссылка
fit-content
Наибольшее из:
- внутренняя минимальная ширина
- меньшая из внутренней предпочтительной ширины и доступной ширины
В данном примере выбрана доступная ширина (ширина родителя), поскольку она больше внутренней ширины (слова перенесены), но меньше предпочтительной ширины (слова в одну строку)
Автор решения: Qwerty Q
→ Ссылка
.container {
width: 350px;
height: 100px;
border: 1px solid black;
}
.fit {
width: min-content;
border: 1px solid red;
}