CODEWITHSUNDEEP
htmlcssflexbox
Alexey Tseitlin
Alexey Tseitlin

Reputation: 1309

Set specific height to a flex item

I have 3 flex items: header, content and footer. I want everything to flex BUT the header to be exactly 250px... I added a style .height-250 {max-height: 250px;} but it is not working.

/* 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>

Upvotes: 0

Views: 15228

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

Instead of max-height: 250px you should use flex: 0 0 250px and with flex-direction: column it will set height of element to 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

Upvotes: 6

Related Questions