html如何继承父元素的高度,css让子元继承父元素的高度

css让子元继承父元素的高度

情景描述：父元素由一个设置了高度的元素撑起，另一个元素自动继承父元素的高，并且两元素在一行显示。

现在情况

style

.far{

border: 1px solid bisque;

}

.s1{

height: 150px;

width: 100px;

background-color: blue;

display: inline-block;

}

.s2{

height: 100%;

width: 50px;

background-color: brown;

display: inline-block;

}

/style

/head

body

div class="far"

div class="s1"/div

div class="s2"/div

/div

/body

方法1：

设置父元素flex，子元素不设置高度

style

.far{

border: 1px solid bisque;

display: flex;

}

.s1{

height: 150px;

width: 100px;

background-color: blue;

display: inline-bl