Table of contents
question
When using flex layout in css, the height of the child element does not reach 100%
flex layout example
I hope to achieve two boxes distributed left and right, with the content vertically aligned in the center.
<style>
.box {
display: flex;
align-items: center;
border: 1px solid #eeeeee;
}
.box-left {
background-color: pink;
}
.box-right {
background-color: skyblue;
}
</style>
<div class="box">
<div class="box-left">《绝句》唐杜甫</div>
<div class="box-right">
<div class="box-right__item">两个黄鹂鸣翠柳，一行白鹭上青天。</div>
<div class="box-right__item">窗含西岭千秋雪，门泊东吴万里船。</div>
</div>
</div>
As you can see, the height of the box on the left is not full.
Solution
method one
Remove the style of the parent elementalign-items: center and set the alignment style of the child element separately
.box {
display: flex;
/* align-items: center; */
border: 1px solid #eeeeee;
}
.box-left {
background-color: pink;
/* 增加如下样式 */
display: flex;
align-items: center;
}
.box-right {
background-color: skyblue;
}
Method 2
Use align-self: stretch; to fill the child elements
.box {
display: flex;
align-items: center;
border: 1px solid #eeeeee;
}
.box-left {
background-color: pink;
/* 子元素撑满 */
align-self: stretch;
display: flex;
align-items: center;
}
.box-right {
background-color: skyblue;
}
process result
