Flexbox包装容器中的不同高度儿童

Question

我有四个盒子，第一个应该是100％，其他三个应该在下面环绕并变短。我正在附上一张图片。

现在顶部元素和底部元素的高度相同 - 如何让顶部元素达到相同的高度？它是底层元素的兄弟。

这是我的CSS：

[ui-view]{
  display: flex;
  flex: 1;
}

.wrapper{
  display: flex;
  flex-flow: row;
  flex:1;
}
.videos{
  display: flex;
  flex-flow: row wrap;
  flex:1;
}

.videos .video{
  flex:33.3%;
}

.videos .video#elementOne{
  flex: 100% 1;
  display: flex;
}
.videos .video:not(#elementOne){
  display: flex;
  flex:33.3%;
}

.videos .video div.OT_publisher{
  width: 100%;
  flex: 1;
}

.videos .video div.OT_subscriber{
  width: 100%;
  flex: 1;
}

HTML：

<div class="wrapper">
<div class="videos">
<div ng-repeat="stream in streamList" class="video" id="{{stream.elementId}}"></div>
</div>

    <div id="messages">
        <ul>
            <li ng-repeat="message in messages">{{message}}</li>
        </ul>
        <input ng-model="currentMessage" id="chatInput"><button ng-click="sendMessage(currentMessage)">Submit</button>
    </div>
<div id="actions"></div>

</div>