当元素绝对定位时，子元素不会占据左元素的全高 - flex

Question

我使用flex来使我的2个子列的高度相同。当我把第二个孩子当作位置时：绝对不会占据全高。我该如何解决这个问题。下面是我的html的样子

<section class="flex-box">
<section class="left-box">
big chunk of data
</section>
<section class="right-sec">
 right sec
<section>
</section>

.flex-box
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

.right-sec
    display block
    background-color  #EDF6F8
    width 100%
    position absolute
    left 100%
    -webkit-transition left 1s
    transition left 1s
    z-index 0

.right-sec.show
   display block
   z-index 1
   left 0px

以上代码适用于移动设备。在这个右秒将在第一次加载时隐藏在移动设备中。当用户点击按钮时，将向其添加show class。所以此部分将与左侧块重叠。但问题是右边的秒没有占据左边块的全高，因为它绝对定位我猜。任何修正，以便右秒与左框的高度相同？