对于这种情况，Grid比flexbox工作得更好，因为您可以将左列的宽度设置为auto，以便调整以适应其内容（可调整大小的iframe），并将右列的宽度设置为1fr以占用所有剩余空间。给予左边的iframe指定宽度，并使右边的iframe为100%宽度。

.d1 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px;
}
.d1 iframe {
  display: block;
  border: 5px solid blue;
  box-sizing: border-box;
  background: yellow;
  min-width: 80px;
}
.d1 iframe:first-child {
  width: 200px;
  max-width: 100%;
  resize: horizontal;
}
.d1 iframe:last-child {
  width: 100%;
}

个字符

不需要使用那些复杂的相对和绝对定位。对于iframe，您只需要两个flex元素，分别具有felx-grow:1和width="100%"和height="100%"。就这样

.resizable {
  display: flex;
  margin: 0;
  padding: 0;
  resize: horizontal;
  overflow: hidden;
  border:1px solid red;
  flex-basis: 0;  /* Aded for Safari */
}

#container2 {
  flex-grow:1;
  height: 400px;
}

#container1 {
  flex-grow:1;
  height: 400px;
}

个字符
最后，如果你在Safari中调整resizable元素的大小有问题，你可以使用这个JS来处理调整大小：

<script>

 function isSafari() {
    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  }

// Check if the browser is Safari and then execute the code
if (isSafari()) {
  const container1 = document.getElementById('container1');
  const container2 = document.getElementById('container2');
  const dragHandle = document.createElement('div');
  dragHandle.classList.add('drag-handle');
  container1.appendChild(dragHandle);

  let startX, startWidth;

  dragHandle.addEventListener('mousedown', (e) => {
    startX = e.pageX;
    startWidth = container1.offsetWidth;
    document.addEventListener('mousemove', doDrag);
    document.addEventListener('mouseup', stopDrag);
  });

  function doDrag(e) {
    const newWidth = startWidth + e.pageX - startX;
    container1.style.flexBasis = `${newWidth}px`;
  }

  function stopDrag() {
    document.removeEventListener('mousemove', doDrag);
    document.removeEventListener('mouseup', stopDrag);
  }
}
</script>

型