你在这里有很多问题。你绝对不应该在同一个元素上有一个容器、一个flex行和一个列。我建议先看一下grid和flex文档，然后再决定使用哪一个。
之后，不要通过在容器和行上添加填充来弄乱网格。它们是精心编排的元素，填充真的会把事情搞砸。如果您希望内容周围有更多的间距，请在 * 列 * 中添加填充或在内容中添加边距。如果你想删除默认的列间距，请查看gutter文档。
请注意，我从iframe中删除了200%的高度。我不知道他们的意图是什么，但一般来说，最好让他们保持自然高度。
col-12不是Bootstrap 4+中的一个东西。只需为要定义列的断点范围使用类。在较小的屏幕尺寸下，元素默认为全宽。
然后，内联样式对所有相关人员来说都是一场噩梦。它们很难一眼就能看清楚和解释清楚，而且需要大量的重复。可以随意使用该库，并使用定制CSS类来完成所需的其余样式。

iframe.my-class {
  display: initial;
  border: 0px;
  width: 100%;
  background: pink;
  border: 1px solid #333 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div id="myContainer" class="container-fluid">
  <div class="row">
    <div class="col-md-6 mt-1">
      <iframe src="iframe-link" allowfullscreen class="my-class"></iframe>
    </div>

    <div class="col-md-6 mt-1">
      <iframe src="iframe-link" allowfullscreen class="my-class"></iframe>
    </div>
  </div>
</div>

你的代码中的问题是，你给了高度：200%到iframe元素。200%表示父高度的两倍。正因为如此，它从母体中溢出。
一个简单的解决方法是给予height：100%为iframe元素。因此，它采用父div的完整高度。
下面是更新后的代码：-

iframe {
      background: pink;
      border: 1px solid #333 !important;
    }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
    integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div id="myContainer" class="flex-row container-fluid col-xs-12 col-xl-8 pl-0 pr-0 pl-lg-4 pr-lg-4">
    <div class="row" style="padding-bottom: 160px;">
      <div class="col-12 col-md-6 pr-1 mt-1 col">
        <iframe src="iframe-link" allowfullscreen=""
          style="display: initial; height: 100%; border: 0px; width: 100%;"></iframe>
      </div>

      <div class="col-12 col-md-6 pl-md-1 mt-1 col">
        <iframe src="iframe-link" allowfullscreen=""
          style="display: initial; height: 100%; border: 0px; width: 100%;"></iframe>
      </div>
    </div>
  </div>

请记住，每当使用百分比时，始终查看父元素。希望对大家有帮助。

添加了.iframe-container来为iframe创建响应容器

.iframe-container {
  position: relative;
  /*adjust as needed to increase height*/
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
  margin-bottom: 10px
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: orange;
  border: 1px dotted black !important
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<style>

</style>

<div id="myContainer" class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-6 pr-md-1 mt-1">
      <div class="iframe-container">
        <iframe src="iframe-link" allowfullscreen=""></iframe>
      </div>
    </div>

    <div class="col-sm-12 col-md-6 mt-1">
      <div class="iframe-container">
        <iframe src="iframe-link" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>
</div>