Как растянуть и центрировать элемент внутри Flexbox вдоль поперечной оси? ⇐ CSS

[Anonymous]

Я пытаюсь получить элемент в макете Flexbox, чтобы заполнить все доступное пространство внутри контейнера, если он может или быть центрированным, если он не может из-за его максимальной шириной /

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

max-height

ограничения. В приведенном ниже фрагменте он работает так, как я хочу вдоль основной оси, но не вдоль поперечной оси. При использовании Align-Items: Center элемент центрируется, но имеет минимальный размер. С Account-Eitems: stretch имеет максимальный размер, но больше не центрируется. Как заставить это работать? Я бы предпочел избегать дополнительных html-элементов. < /P>

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

.container {
background: blue;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
/* align-items: stretch; */
}

.item {
flex: 1;
background: red;
min-width: 20px;
min-height: 20px;
max-width: 100px;
max-height: 100px;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/795 ... cross-axis