Sticky CSS Sidebar without fixed width [No JS] - html

Question

I have a question, I want to have my window split vertically
-----------
|Div 1 |D2|
| | |
-----------
#D2{
position: fixed;
top: 0;
right: 0;
height: 100vh
}
Here's the catch: D2 has an image, that scales proportionally, so the width is depended on the height.
Currently Div 1 is taking the full width (100%) and I don't know how to get it to do: 100vw-(#D2[val])vw

Answer 1

Flex ? play with this snippet at http://codepen.io/gcyrillus/pen/VaaaRK or run it below here.
If you think flex still too much up to date, then you can use display:table; http://codepen.io/gcyrillus/pen/WwwGXr
/* 101 */
body {
display: flex;
margin: 0;
}
#one {
flex: 1;
}
img {
display: block;
height: 100vh
}
/* extra */
body {
background: #F4BB2D
}
#one {
display: flex;
align-items: center;
justify-content: center;
text-align:right;
color: #89870A;
font-size: 7vw;
text-shadow: 1px 1px black, -1px -1px 1px gray
}
img {
box-shadow: 0 0 5px;
}
<div id="one">
Click Full Page <br/> Or Close
</div>
<div id="two">
<img src="http://lorempixel.com/200/500/nature/6" />
</div>
added some extra terrestrial words to try break it pushing D2 under
/* 101 */
body {
display: flex;
margin: 0;
}
#one {
flex: 1;
}
img {
display: block;
height: 100vh
}
/* extra */
body {
background: #F4BB2D
}
#one {
display: flex;
align-items: center;
justify-content: center;
text-align:right;
color: #89870A;
font-size: 7vw;
text-shadow: 1px 1px black, -1px -1px 1px gray
}
img {
box-shadow: 0 0 5px;
}
<div id="one">
<blocquote>ClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrClose<br/>
<cite> Zi stutterer that came from mars </cite></blockquote>
</div>
<div id="two">
<img src="http://lorempixel.com/200/500/nature/6" />
</div>