[FIXED] Why is my div not taking up 100% height of its parent container?

Issue

Bit confused here. I am quite tired, so I'm sure I'm making a silly mistake but here's my HTML/CSS:

.CAContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
}
.CASideBorder {
  height: 100%;
  background: #000;
  width: 8px;
}
.CAMiddleContainer {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.CATopBorder {
  height: 8px;
  background: #000;
  width: 100%;
}
.CAMiddleTextContainer {
  padding: 40px 80px 40px 80px;
  font-size: 4em;
  color: #000;
}
.CABottomBorderContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8px;
}
.CABottomBorderLeft,
.CABottomBorderRight {
  flex: 1;
  height: 100%;
  background: #000;
}

<div class="CAContainer">
  <div class="CASideBorder" id="CALeftBorder"></div>
  <div class="CAMiddleContainer">
    <div class="CATopBorder"></div>
    <div class="CAMiddleTextContainer">
      text
    </div>
    <div class="CABottomBorderContainer">
      <div class="CABottomBorderLeft"></div>
      <div class="CABottomBorderRight"></div>
    </div>
  </div>
  <div class="CASideBorder" id="CARightBorder"></div>
</div>

And the fiddle.

Shouldn't CASideBorder be taking up 100% of its parent container, which has its height calculated by the text size and padding of CAMiddleTextContainer? Am I missing something really obvious here? Any help is appreciated.

Solution

That is because you have align-items: center for the flexbox in which case it will default to the content height.

What you need to do is to remove that (let align-items: stretch come into play as it is the default) and also remove the height:100% from CASideBorder.

See demo below:

.CAContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.CASideBorder {
  background: #000;
  width: 8px;
}

.CAMiddleContainer {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.CATopBorder {
  height: 8px;
  background: #000;
  width: 100%;
}

.CAMiddleTextContainer {
  padding: 40px 80px 40px 80px;
  font-size: 4em;
  color: #000;
}

.CABottomBorderContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8px;
}

.CABottomBorderLeft, .CABottomBorderRight {
  flex: 1;
  height: 100%;
  background: #000;
}

<div class="CAContainer">
  <div class="CASideBorder" id="CALeftBorder"></div>
  <div class="CAMiddleContainer">
    <div class="CATopBorder"></div>
    <div class="CAMiddleTextContainer">
      text
    </div>
    <div class="CABottomBorderContainer">
      <div class="CABottomBorderLeft"></div>
      <div class="CABottomBorderRight"></div>
    </div>
  </div>
  <div class="CASideBorder" id="CARightBorder"></div>
</div>

Answered By - kukkuz

Answer Checked By - Mary Flores (PHPFixing Volunteer)