proportionnal scale div resize

Question

Here is my problem, I would like the right div to occupy all the space but proportionally. On the left I have a div which would be of fixed width. I would like that when the window changes size, the div with the pink background adapts while remaining proportional. Thanks in advance. For the moment that is my code :

*
{
    margin:0;padding:0;
}

.contenu{
width: 90%;
position: relative;
margin: auto;
border: solid black;

}
.teste{
       overflow: hidden;
    min-height: 100vh;
    border: 2px dashed #f0f;
    position: relative;
  
}
.col{
  width:100px;
  height:100px;
  border:solid black;
  float:left;
}
.prop
{
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 1.778 */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

<div class="contenu">
<div class="col"></div>
<div class="teste">
<div class="prop"></div>
</div>
</div>

http://jsfiddle.net/8btx6cp2/