Принудительное вертикальное переполнение вверх - HTML / CSS

Question

У меня есть видео, которое я установил для размещения объекта внутри div. Это работает нормально, но когда я использую это свойство, оно меняет поведение элемента-брата. По сути, когда я уменьшаю размер окна, а текстовое поле родственного элемента уменьшается, переполнение толкает окно дальше вниз по его базовой линии.

Однако, если я использую display: flex на родительском элементе, это предотвращает это поведение, так что базовая линия текстового поля остается в той же позиции. Однако я не могу заставить работать свойство fit-fit при использовании flex.

Поэтому у меня два вопроса:

Есть ли способ применить свойство object-fit для работы с flex-контейнером?

или же,

Есть ли способ сделать отображение: переполнение вертикального элемента блока идет только вверх.

Пример первого поведения в этом Codepen: https://codepen.io/pauljohnknight/pen/YYMadP

Пример того, как я хотел бы, чтобы текстовое поле работало, находится в этом Codepen: https://codepen.io/pauljohnknight/pen/RxzBGe

Код для текущей ситуации:

body {
  background: lightblue;
  margin: 0;
  padding: 0;
  display: margin: 20px;
  height: 300vh
}

#section-1 {
  position: relative;
  margin: 50px auto;
  width: 80%;
  background: red;
  box-sizing: border-box;
}

#section-1 #row-1 {
  position: relative;
  background: yellow;
  width: 100%;
  height: 400px;
}

#videowrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

video {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.one-col {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #320E3B;
  position: relative;
  left: 30px;
  top: -120px;
  padding: 2rem;
  width: 50%;
}

.slide {
  color: white;
}

<section id="section-1">
  <div class="row" id="row-1">
    <div id="videowrap">
      <video loop autoplay src="https://s3.eu-west-2.amazonaws.com/bakerboxvideos/handwriting2.mp4"></video>
    </div>
    <div class="one-col">
      <div class="innertext slider-wrapper">
        <div class="slide slide-1">
          <h2>This is a Heading Of Some Text</h2>
          <p>This is a subheading with some more text placed into it</p>
        </div>
      </div>
    </div>
  </div>
</section>