可变高度，自动溢出

我正在字符串中使用as-height 100%在两个div中应用溢出。我有两个小提琴。一个效果很好，第二个不好。当然，我需要用第二个选项做我想做的事。这是两个问题：

1）http://jsfiddle.net/T3qF8/96/（有效）2）http://jsfiddle.net/8y48q/29/（无效）

两个例子之间唯一的区别是在第二个例子中我使用了uikit。可能是问题吗？顺便说一下，这里的代码来自第二个jsfiddle：

html, body {
    margin: 0; padding: 0;
    height: 100%;
    overflow: hidden;
}
#header_with_dynamic_height {
    background-color: #fafafa;
    height:30px;
    float: left; width: 50%;
}
#remaining_height_with_scrollbar {
    background-color: #009688;
    height: 100%;
    overflow: auto; 
    width: 100%;
    float: right;    
    padding-left:10px;
    /* If you change this to "scroll" or "auto", the content disappears */
}
#remaining_height_with_scrollbar_left {
    background-color: #F44336;
    height: 100%;
    overflow: auto;   
    width: 100%;
    float: left;
    padding-left:10px;
    /* If you change this to "scroll" or "auto", the content disappears */
}

<div ng-app="myApp">
  <div ng-controller="TestCtrl">
    <nav id="header_with_dynamic_height" class="uk-nav">
      <ul>
        <li>Test</li>
      </ul>
    </nav>
    <div class="tabs-content">
      <ul class="uk-tab" data-uk-tab>
        <li class="uk-active"><a href="">...</a>
        </li>
        <li><a href="">...</a>
        </li>
      </ul>
    </div>
    <div class="uk-width-1-1">
      <div class="uk-grid">
        <div class="uk-width-1-2">
          <div id="remaining_height_with_scrollbar_left">
            Here
            <br/>should
            <br/>be
            <br/>a
            <br/>scrollbar.
            <br/>But
            <br/>the
            <br/>content
            <br/>overlaps.
            <br/>1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10
            <br/>1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10 1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10
            <br/>1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10 1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10
            <br/>1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10 1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10
            <br/>1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10
          </div>
        </div>
        <div class="uk-width-1-2">
          <div id="remaining_height_with_scrollbar">
            Here
            <br/>should
            <br/>be
            <br/>a
            <br/>scrollbar.
            <br/>But
            <br/>the
            <br/>content
            <br/>overlaps.
            <br/>1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10
            <br/>1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10 1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10
            <br/>1
            <br/>2
            <br/>3
            <br/>4
            <br/>5
            <br/>6
            <br/>7
            <br/>8
            <br/>9
            <br/>10
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

感谢