2个flexbox列并排，两个都有流体高度，一个永远不会超过另一个的高度

Question

我正在使用flexbox并排显示两个<div>。一个有视频，另一个有文字。 <div>都没有固定的高度。我希望文本div永远不会比视频div高。如果文本div自然比视频div高，那么我希望文本div有一个垂直滚动条。我怎样才能做到这一点？我已经尝试将overflow-y: auto添加到文本div中，但这不起作用。以下是该问题的演示：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #ddd;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42857143;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.video,
.text {
  padding: 10px;
}

.video {
  position: relative;
  width: 75%;
  background-color: #999;
}

.text {
  width: 25%;
  background-color: #bbb;
}

@media (max-width: 767px) {
  .video,
  .text {
    width: 100%;
  }
}

.red {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  background-color: red;
}

/* From embedresponsively.com */

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <div class="video">
    <div class="red"></div>
    <div class="embed-container"><iframe src="http://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen></iframe></div>
  </div>
  <div class="text">
    <p>
      When you change the width of your browser window, the video's
      dimensions will change.
    </p>

    <p>
      I want the height of this text div to never exceed the height of the
      video. It should have a vertical scrollbar instead.
    </p>

    <p>
      For testing purposes, I have created the <code>div.red</code>
      element. Currently, it is possible to expose this div by resizing
      your browser window (you will see red below the video). I want to
      make it so that exposing the <code>div.red</code> element is not
      possible. I want this text div to have a vertical scrollbar instead.
    </p>

    <p>
      Note that you need to have your browser window at least 768px wide in
      order for the video div and text div to be side by side.
    </p>
  </div>
</div>