float divの高さを親divに塗りつぶす

Question

だから、私は浮動小数点型のdivを使う必要があります。親div内で互いに隣り合う2つの子div。右のdivは幅と高さが固定されており、左のdivは右のdivと同じ高さに展開します。

ここにサンプルがあります。私は左divを右divと同じ高さにします。そして私はフロートを使わなければなりません。絶対配置や表示に変更する必要はありません：テーブルなど。

これが可能なのは誰でも知っていますか？

html, body { 
 
    height: 100%; 
 
} 
 

 
div { 
 
    font-family: Tahoma, Verdana sans-serif; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    background-color: rgba(255, 255, 0, 1); 
 
    overflow: auto; 
 
} 
 

 
.left { 
 
    height: 100%; 
 
    width: calc(100% - 100px); 
 
    background-color: rgba(0, 0, 255, 0.6); 
 
    float: left; 
 
    padding: 20px; 
 
    border: dashed thick blue; 
 
} 
 

 
.right { 
 
    float: right; 
 
    width: 100px; 
 
    padding: 20px; 
 
    border: dashed thick green; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    LEFT 
 
    </div> 
 
    <div class="right"> 
 
    RIGHT RIGHT RIGHT RIGHT 
 
    </div> 
 
</div>

ここにもフィドル：https://jsfiddle.net/y0zatg8w/

Answer 1

<div class="container"> 
    <div class="left"> 
    LEFT 
    </div> 
    <div class="right"> 
    RIGHT RIGHT RIGHT RIGHT 
    </div> 
</div> 

div { 
    font-family: Tahoma, Verdana sans-serif; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

.container { 
    width: 100%; 
    background-color: rgba(255, 255, 0, 1); 
    overflow: auto; 
    display:flex; 
} 

.left { 
flex:10; 
    width: calc(100% - 100px); 
    background-color: rgba(0, 0, 255, 0.6); 
    float: left; 
    padding: 20px; 
    border: dashed thick blue; 
} 

.right { 
    flex:1; 
    float: right; 
    width: 100px; 
    padding: 20px; 
    border: dashed thick green; 
}