在flex内部有2个div(左和右)，其中嵌套了flex div。现在右边的div在左边的上面。如何在它们之间划清界限？

.flex-container {
  display: flex;
  justify-content: space-between;
}

<div class="flex-container">
  <div class="left">
    <!-- 左边的内容 -->
    <div class="nested-flex-container">
      <div class="nested-flex-item"></div>
    </div>
  </div>
  <div class="right"></div>
</div>

.left {
  flex: 1;
}

.nested-flex-container {
  display: flex;
}

.nested-flex-item {
  flex: 1;
}

.right {
  position: relative;
  z-index: 1;
}