Попытка вертикально центрировать элемент div внутри раздела, но высота раздела не изменится [дубликат] ⇐ Html

[Anonymous]

В приведенном ниже фрагменте я пытаюсь центрировать элемент div в разделе как по горизонтали, так и по вертикали. Элемент , в который вложен , имеет высоту, которая заполняет все дополнительное пространство на странице (

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

flex: 1;

), но даже несмотря на то, что вложенный раздел имеет атрибут CSS height: 100%; его высота не заполняет элемент . Я сделал что-то не так?

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

body {
background-color: gray;
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
body main {
flex: 1;
}

header {
background-color: white;
}

footer {
background-color: white;
}

section:has(> div.multi-step-form) {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
section:has(> div.multi-step-form) div.multi-step-form form {
background-color: white;
}

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

Project Auto Quote


Header



form



Footer

Подробнее здесь: https://stackoverflow.com/questions/793 ... eight-wont