divが親コンテナの高さを100％上回っていないのはなぜですか？

Question

ビットはここで混乱します。私はかなり疲れているので、私は、私は愚かな間違いを作ってるんだと確信しているが、ここに私の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>

とfiddle。

CASideBorderは、その高さがテキストサイズで計算され、埋め込みがCAMiddleTextContainerである親コンテナの100％を占めてはいけませんか？私は本当にここで何かを見逃していますか？どんな助けもありがとうございます。

Answer 1

これはフレックスボックスにalign-items: centerがあるためです。この場合、コンテンツの高さがデフォルトになります。

これを削除する必要があります（align-items: stretchがデフォルトの状態で再生されます）。もCASideBorderから削除してください。

下記参照デモ：

.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>