父容器高度不确定，子容器float后高度100%

Question

<style>
.parent {
    border: 1px solid #CCCCCC;
}
.left {
    clear: left;
    float: left;
    width: 30%;
    background-color: #999;
}
.right {
    clear: right;
    float: left;
    width: 50%;
    height: 100%;
    background-color: #FFC;
}
.clearfix {
    clear: both;
}
</style>
<div class="parent">
    <div class="left">left<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="right">right</div>
    <div class="clearfix"></div>
</div>

div的高度都不确定，现在想实现的效果：无论left多高，right的高度与left一致。
不使用js，纯css能否解决？

Answer 1

http://www.w3cplus.com/css/creaet-equal-height-columns
可以去这边看看

Answer 2

来晚了。初步的实现思路是让 right 高度不影响父元素和兄弟元素 left，考虑让 right 脱离文档流，然后 left 流出足够的位置给 right。使用 float 的话在 clearfix 之后父元素高度还是会被 float 元素的高度撑开，所以考虑使用 display: absolute。
具体实现方案如下(jsbin 链接)：
css:

* {
  box-sizing: border-box;
}
.clearfix::after {
  display: block;
  content: '';
  clear: both;
}
.body {
  border: 1px solid blue;
  width: 280px;
  position: relative;
}
.left {
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  overflow-y: auto;
}
.right {
  float: right;
  border: 1px solid green;
  width: calc(100% - 40px);
}

html:

<div class="body clearfix">
  <div class="left">我的高度和旁边的一样</div>
  <div class="right">我的高度是自定义的，我想要多高就多高，我有多高我隔壁那个就多高。我可以写很多很多的字都会正常展示。</div>
</div>

Answer 3

flex
flex介绍

Answer 4

同问,有答案了吗