css3 - 请教一下，css如何使左右两边的div高度自适应相等

问题描述

现在有一个需求基本结构

<p class='parent'> <p><table>....</table> </p> <p><textarea ></textarea> </p></p>

在parent里面又两个p,左边p中表格的高度根据tr的高度撑开，tr的数量不定。右边p中textarea的高度根据左边p的自适应。现在的css

.parent{ width:800px; }p p { background: #1296db; margin-bottom:-3000px; padding-bottom:3000px; display: inline-block; height: auto; width: 50%; vertical-align: top;} textarea{ height: 100%; width: 100%;}

现在虽然左右两个p的高度看起来一样，但是右边textarea的高度并不充满p的高度。请问一下该如何实现这个布局

问题解答

.parent{ display: flex; width:800px;}.parent p { width: 50%;}.parent textarea { box-sizing: border-box; height: 100%; width: 100%;}