css中如何實現左邊的高度隨着右邊改變而改變

html結構：

<div class="main">
    <div class="main_left"></div>
    <div class="main_right></div> 
</div>

css樣式：

.main{ overflow: hidden; }
.main_left{ width: 20%;  height:100%; float: left; background-color: #fff; padding-bottom:9999px; margin-bottom:-9999px;}
.main_right{ width: 80%; float: right; box-shadow: inset 0 0 5px #000; padding:15px; box-sizing: border-box; height: 100%; overflow: hidden; }

實際上起到核心作用的是padding-bottom:9999px; margin-bottom:-9999px;這一部分讓div填充滿整個父框架