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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.