CODEWITHSUNDEEP
htmlcss
Elcid_91
Elcid_91

Reputation: 1681

Flex Box Behavior

I cannot understand WHY I am not getting this:

.container {
  width: 600px;
  height: 400px;
  border: 3px solid green;
}

.cg-panel {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  justify-content: center;
}

.cg-panel .content {
  flex: 1;
  background-color: tomato;
}
<div class="container">
  <div class="cg-panel">
    <div class="content"></div>
  </div>
</div>

I, for the life of me, cannot understand why the content panel does not vertically stretch the entire container. What is the purpose of "flex:1" if it isn't going to work? Am I not reading the documentation correctly?

Upvotes: 0

Views: 34

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18639

There's nothing in your CSS that is expanding the height of .cg-panel to fit its parent .container.

Adding height: 100%; to .cg-panel fixes this:

.container {
  width: 600px;
  height: 400px;
  border: 3px solid green;
}

.cg-panel {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  justify-content: center;
  height: 100%; /* add this */
}

.cg-panel .content {
  flex: 1;
  background-color: tomato;
}
<div class="container">
  <div class="cg-panel">
    <div class="content"></div>
  </div>
</div>

Upvotes: 3

Related Questions