Почему максимальная ширина: мин (100%, 30ем) может заставить контейнер занимать все доступное пространство, в зависимост ⇐ CSS

[Anonymous]

Я пытался быть умным и применяемым максимальной шириной: мин (100%, 30ем); к моим элементам, которые содержат текст. В результате при некоторых обстоятельствах контейнер такого элемента занимает все горизонтальное пространство, но не всегда.
Я просто очень любопытно, как это можно объяснить! min () < /code> function.) < /p>

Код: Выделить всё

.broken .child{
max-width: min(100%, 30em);
}
.okay .child {
width: 100%;
max-width: 30em;
}

.container{
display: inline-flex;
}< /code>
Broken



My container would take up all space if I contained more text.






See! What is going on here? What is going on here? What is going on here? What is going on here? What is going on here? What is going on here? What is going on here? What is going on here?




Okay



Here everything is okay, because instead of the clever max-width/min() combo, I've applied a width and a max-width on my parent.

https://codepen.io/kslstn/pen/opvdmqjeditors=1100

Подробнее здесь: https://stackoverflow.com/questions/796 ... lable-spac