Поместить элемент x% пути вместе с flexbox?

Question

Я хочу расположить элемент так, чтобы из доступного пространства 1/3 находилась над ним, а 2/3 - под ним. Это проект React Native, поэтому я могу использовать flexbox, но не grid или float.

Этот код работает, но он не очень чистый, имея пустые элементы div.first и div.last, это можно сделать без них?

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.one {
  background: gold
}

.first {
  flex: 1;
}

.last {
  flex: 2
}

<div class="first"></div>
<div class="one">One</div>
<div class="last"></div>

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/PoPjdad

Answer 1

Как насчет использования маржи, как это?

Редактировать: просто добавьте overflow-y:hidden; к телу

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y:hidden;
}

.one {
  background: gold;
    margin:33vh 0 66vh 0;
}

<div class="one">One</div>

Answer 2

Почему вы просто не go с position? И удалите ненужные контейнеры

.one { background: gold; position: absolute; top: 33.3%; width: 100%; }