行内块元素高度撑满父元素

最近遇到了一个css问题；问题如下

父元素不设置高度，子元素全为（display:inline-block），左侧内容撑开高,想要右侧子元素高度为100%（即与左侧子元素高一致），使用height:100%,并不好使，始终是内容撑开的高，而非父级高，

<li v-for="list in lists”>   //父元素

<div>{{list.name}}</div>  //左侧子元素

<div><p v-for="item in list.child">{{item}}</p></div> 右侧子元素

<div><div v-for="item in list.child"><p>{{item}}</p></div> </div> //后为了垂直居中，修改成这样

</li>

一、子元素高度与父级一致解决方法

1、给父级元素设置:display：flex;display:-webkit-flex;align-items:stretch;

2、右侧子元素:height:inherit;

高度完美撑开，但又衍生另外一个问题，文字无法垂直居中；

思路：

1、无法确定高度，line-height自然无法使用；

2、display:inline-block;vertical-align:middle无法生效(原来是父级元素设置了display:flex），而且无法设置display:table-cell;

3、定位，右侧子元素中是个循环，从左往右排，left不一致（而且是动态生成）。无法用定位

二、文字垂直居中解决方法

解决方法，灵机一动，又在外层套了一层div,div从左往右排(position:relative),这样每个 p标题定位是相对于div就好办了；

position:absolute;top:50%;transform:translateY(-50%);

完美垂直居中；

三：研究一下从未使用过的align-items属性；

它为display:-flex时使用，有一下几个值

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

stretch  默认值。元素被拉伸以适应容器。

center  元素位于容器的中心。（垂直居中过程试过并不好用）

flex-start  元素位于容器的开头。

flex-end  元素位于容器的结尾。

baseline  元素位于容器的基线上

initial  设置该属性为它的默认值

inherit  从父元素继承该属性。