Div height 100% in div height auto?

Question

I will try to be very explanatory. I have the structure of a common site as you can see in the html below. And I want the height of the sidebar to increase as the height of the container next to it. It can also be understood if I say I need the sidebar to always reach the maximum height of the #wrap, that this with height automatic. I have the following code:

<div id='wrap'>
  <div id='posts'></div>

  <div id='sidebar'>
    <div class='widget'></div>
    <div class='widget'></div>
  </div>
</div>

*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
#wrap{width:90%;margin:30px auto;background:#DDD;padding:20px;overflow:hidden;}
#posts{float:left;width:68%;height:2000px;background:#333;}
#sidebar{float:right;width:30%;background:#CD0000;padding:10px;}
#sidebar .widget{width:100%;height:300px;background:#111;margin:0 0 20px;}
#sidebar .widget:last-of-type{margin-bottom:0}

Link: https://jsfiddle.net/xeL80e1o/4/

I know I could solve this easily using the position:absolute and adding these css commands to their respective classes:

#wrap{position:relative;}
#sidebar{position:absolute;right:0;height:100%}

However, it turns out that once the content inside the sidebar is larger than the sidebar itself, the content will be cut. Because the sidebar does not exceed the limits of #wrap, which is where I define the position:relative. Behold: https://i.imgur.com/Eutklk5.png

Now that everything has been well explained, briefly precise with the sidebar to follow the height of the container next, but when the content inside the sidebar is larger, it Redimencione normally as if using the position:static, and so that the #wrap don’t cut it. Well, someone who can help me?

Answer 1

See working here Jsfiddle.

Basically, you force the display of the element wrap be a table (table) and that the divs are forced to be similar to the cells in a table (table-cell).

#wrap {
    width: 100%;
    display: table;
}

#wrap #sidebar { 
    display: table-cell; 
    width: 25%;
    background: teal;
    min-height: 100%;
}

#wrap #posts { 
    display: table-cell; 
    width: 75%;
    background: orange;
    min-height: 100%;
}