Как установить ширину мин на содержание, но все же никогда не превышает ширину родительских контейнеров ⇐ CSS

[Anonymous]

возможно ли установить минимальную ширину для div, но все же уважать ширину родительского контейнера.
Мотивация : мне нужно иметь статус Div, что, если достаточно Пространство в контейнере для родителей, всегда имеет ширину контента или не менее 120px, если ширина содержания меньше. Однако, если родительский контейнер меньше 120px, статус Div не должен превышать максимальную ширину родителей. Другими словами, максимально-контент: 100%. Ниже код решения я попробовал. < /P>
Проблема в том, что я не могу установить мин-ширину: 120px, потому что он всегда будет переопределять максимальную ширину: 100% и переполненный родительский контейнер, если он есть меньше, чем статус div. Я попытался установить ширину: 120px, поэтому максимальная ширина: 100% работает в этом случае сокращение контейнера состояния, но тогда мне нужно убедиться, что если у родителей есть больше места для контента, превышающего 120px, я использую это пространство, поэтому я установил Мин-ширина: подготавливание; Это позволяет контенту расширяться, но переполняется в случае родителя меньше. Вместо этого он должен действовать как в последнем примере. Итак, как достичь ожидаемого поведения только с CSS? = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

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

.parent {
border: 1px solid blue;
width: 200px;
margin-bottom: 16px;
}

.status {
display: inline-flex;
justify-content: center;
border: 1px solid red;
max-width: 100%;
width: 120px;
min-width: fit-content;
}

.status-demo {
display: inline-flex;
justify-content: center;
border: 1px solid red;
max-width: 100%;
}

.content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}< /code>


Parent width 200px. Content less than 120px, should expand to 120px.

New


Parent width 200px. Content longer than 120px, should expand to content width.


Longer thatn 120px content



Parent width 200px. Content longer than 200px, should not exceed parents 200px.


Content longer than 200px so should show not exceed parent



How above should actually behave


Content longer than 200px so should show not exceed parent

Подробнее здесь: https://stackoverflow.com/questions/794 ... iner-width