Установите определенную высоту на гибкий элемент

Question

У меня есть 3 элемента flex: заголовок, содержимое и нижний колонтитул. Я хочу, чтобы все было гибким, но заголовок должен быть точно 250 пикселей ... Я добавил стиль .height-250 {max-height: 250px;}, но он не работает.

/* GRID */ 
 
.grid { 
 
    display: flex; 
 
} 
 
.col { 
 
    background-color: rgba(100, 255, 255, 0.1); 
 
    border: 1px solid rgb(100, 255, 225); 
 
    padding: 5px; 
 
} 
 
.col-1-12 { 
 
    flex-basis: 8.3333%; 
 
} 
 
.col-2-12 { 
 
    flex-basis: 16.6666%; 
 
} 
 
.flex-column { 
 
    flex-direction: column; 
 
} 
 
.full-width { 
 
    flex-grow: 100; 
 
} 
 
.wrapper, 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.height-250 { 
 
    max-height: 250px; 
 
}

<div class="wrapper grid flex-column"> 
 
    <div class="col col-1-12 height-250">Header</div> 
 
    <div class="grid col full-width col-2-12">Content</div> 
 
    <div class="col col-1-12">Footer</div> 
 
</div>

Answer 1

Вместо max-height: 250px вы должны использовать flex: 0 0 250px и flex-direction: column он установит высоту элемента 250px.

.grid { 
 
    display: flex; 
 
} 
 
.col { 
 
    background-color: rgba(100, 255, 255, 0.1); 
 
    border: 1px solid rgb(100, 255, 225); 
 
    padding: 5px; 
 
} 
 
.col-1-12 { 
 
    flex-basis: 8.3333%; 
 
} 
 
.col-2-12 { 
 
    flex-basis: 16.6666%; 
 
} 
 
.flex-column { 
 
    flex-direction: column; 
 
} 
 
.full-width { 
 
    flex-grow: 100; 
 
} 
 
.wrapper, 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.height-250 { 
 
    flex: 0 0 250px; 
 
}

<div class="wrapper grid flex-column"> 
 
    <div class="col col-1-12 height-250">Header</div> 
 
    <div class="grid col full-width col-2-12">Content</div> 
 
    <div class="col col-1-12">Footer</div> 
 
    </div