Expand float div height zum Füllen der Eltern div

Question

Also, ich bin in einer Situation, in der ich 'floated' divs verwenden muss. Zwei Kinder divs nebeneinander in einem Elternteil div. Das rechte div ist fest und größer und ich möchte, dass das linke div sich auf die gleiche Höhe wie das rechte dehnt.

Hier ist das Beispiel. Ich möchte, dass das linke div gleich hoch ist wie das rechte div. Und ich muss Schwimmer benutzen. Kein Wechsel zur absoluten Positionierung oder Anzeige: Tabelle oder irgendetwas.

Wer weiß, ob das möglich ist?

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>

Geige auch hier: 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; 
}