子元素设置高度百分比无效+如何让浮动子元素高度等于父元素高度

场景描述

今天遇到了一个样式场景：页面内主题盒子定宽为1200px，然后整体是一个经典的两栏布局，左右两个盒子之间存在一定间距且两个盒子宽度固定，没有内容的时候两栏的高度都固定为766px，有内容时自适应高度。
一开始我直接按照设计图用了浮动布局，左栏设置向左浮动，右栏用margin-left:左栏宽度+间距撑开两个盒子间的距离，两栏设置了宽高（其实不应该设置高度的，因为高度不定，后面会说。）

问题出现

1. 联调的时候，当数据渲染时，由于右栏高度小于数据渲染长度，导致后面的列表项无法显示出来。

解决方法：不要直接去设置高度，但因为无内容时需要有一定的高度，所以选择设置min-height属性，来确定元素的最小高度。

2. 父元素设置了min-height或者没有设置height，而子元素设置height:100%;无效。

这是因为百分比是相对其最近的父元素的高度，而它需要一个明确的、固定的高度才能使百分比生效。而min-height是限定盒子的最小高度，并非最终高度。

min-height表示盒子的最小高度，并不表示盒子的最终高度，站在外部盒子的角度理解是外部最终高度是由盒子的内部元素的高度与当前盒子的最小高度共同决定。
在外部盒子等待内部元素计算出高度时并不知道自己的高度，内部盒子高度相对外部盒子设置高度时也未知外部高度，所以按照自己的内容的情况渲染了，最终的效果就是内部盒子高度与外部无关。

父元素设置min-height，子元素设置height:100%;无效

3. 因为前文说了要高度自适应，所以不能直接设置固定高度，只能设置min-height，所以产生了新问题：父元素高度被右栏撑开，而浮动子元素A的高度比父元素高度小。
   

关于“如何让浮动子元素的高度等于父元素高度”的问题，我查了很久，思否上有相关的回答，但是还是太麻烦了，总结来说就是两种：
1.js直接操作dom去修改，不建议且没必要
2.浮动布局改成定位方法了

最后我采取的方法是直接改成flex布局，直接清晰。

/* 父元素设置 */
.tab_container{
    width:1200px;
    min-height:766px;
	display:flex;
	flex-flow:row;
}

子元素按需要设置宽度或flex比例即可。