Fai due div affiancate, una è ridimensionabile e l'altra ha la stessa altezza

Question

Io porto qui un dramma con altezza css.

Vorrei creare un layout, un div che contenga 2 div entrambi nella stessa riga, uno è ridimensionabile e l'altro deve adattarsi all'altezza del genitore (stessa altezza del primo).

Il primo div può avere informazioni aggiuntive (quindi i non può correggere l'altezza), quindi avrà più righe, l'importante è che non deve avere una barra di scorrimento. Il secondo div deve obbedire alla prima altezza, se è più grande di quanto disporrà di una barra di scorrimento.

<div class='container'> <!-- parent --> 
    <div class='left'> <!-- resizable --> 
    </div> 
    <div class='right'> <!-- same height as left div --> 
    </div> 
</div> 

UNSOLVED CODE

Il problema è che io non riesco a capire come farlo usando solo CSS. O anche è possibile solo con i CSS. Non mi piacerebbe usare js.

Qualcuno, per favore aiutatemi!

Answer 1

Fiddle

quello che fai è fare la giusta absolutely positioned che ferma la sua altezza influenzare il genitore.

RILEVANTE CSS

.container { 
    background-color: gray; 
    display: table; 
    width: 70%; 
    position:relative; 
} 

.container .left{ 
    background-color: tomato; 
    width: 35%; 
} 

.container .right{ 
    position:absolute; 
    top:0px; 
    left:35%; 
    background-color: orange; 
    width: 65%; 
    height:100%; 
    overflow-y: auto; 
}