Пусть дети расширяются до максимальной ширины внутри родителя, который сжимается до нужного размера. ⇐ CSS

[Anonymous]

Я хочу, чтобы родительский контейнер сжимался, чтобы соответствовать содержимому его дочерних элементов. Я обнаружил, что это выполнимо либо с помощью inline-block, либо с помощью inline-flex. Я также хочу, чтобы дочерние элементы могли расширяться до максимальной ширины, независимо от их содержимого, и именно здесь у меня возникла проблема.
Похоже, эти два условия находятся в конфликте. , поскольку дочерний элемент не будет расширяться до максимальной ширины ни в одном сценарии, который я пытаюсь использовать, если его содержимое не позволяет этого. Я просто хочу, чтобы дочерний элемент занимал максимальную ширину, которую он может, и чтобы родительский элемент настраивался соответствующим образом.
Вот пример того, что я собираюсь сделать: https://jsfiddle.net/handcraft4 /t857qyb4/39/

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

.red-wrapper {
display: flex;
flex-direction: column;
align-items: center;
container-type: inline-size;
container-name: page-wrapper;
padding: 20px;
border: 1px solid red;
}

.blue-header {
border: 1px solid blue;
text-align: center;
}

/* this style is set inside the component that will load here */
.green-dynamic-content {
max-width: 500px; /* should be 500 but it is not */
border: 1px solid green;
padding: 5px;
}

.orange-footer {
border: 1px solid orange;
text-align: right;
}

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

Header



Width set by component



Footer

Есть ли у кого-нибудь предложения?

Подробнее здесь: https://stackoverflow.com/questions/793 ... nks-to-fit