我正在尝试制作一个特殊类型的CSS布局，就像这样（可以工作）。请注意，我没有使用Stack Overflow内置代码编辑器，只是因为它缺乏SCSS支持：
https://codepen.io/stratboy/pen/NWYZwex
正如评论中所问的，我还将添加一个编译后的CSS版本，但我真的认为您应该在CodePen上观看它，因为它也有一个大屏幕，目前需要真正看到发生了什么：

.main-container {
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background-color: #c3c3c3;
}

.inner-container {
  width: 100%;
  background-color: #777;
}

.columns {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  background-color: rgba(0, 0, 200, 0.5);
  gap: 4em;
}

.left {
  text-align: left;
  height: 100px;
  background-color: cyan;
  width: calc(458px - 2em);
}

.right {
  text-align: right;
  height: 100px;
  width: calc(50vw + 114.5px - 2em);
  background-color: red;
}

<div class="main-container">

  <!-- <div class="inner-container"> -->

    <div class="columns">
      <div class="column left">
        left
      </div>
      <div class="column right">
        right
      </div>
    </div><!-- cols -->

  <!-- </div> --><!-- inner -->

</div>

以上是右边的出血边缘列。基本上，给定一个居中的1145像素的"底层"或"重影"容器，我想要一个40%的列和一个出血边缘列，间距为4em。在上面，我可以做到这一点。
列应与使用通用弹性基准方法的其它类似组件"对齐"，即40%和60%。但我发现，与普通弹性基准布局相比，上述解决方案的效果并不理想。在此，我尝试了另一种类似的方法，但结果相同：列未与标准Flex布局完全对齐：
https://codepen.io/stratboy/pen/PoeNPMz
正如评论中所问的，我还将添加一个编译后的CSS版本，但我真的认为你应该在CodePen上观看它，因为它也有一个大屏幕，目前需要真正看到发生了什么：
一个二个一个一个
请看一下青色列。例如，以下内容将导致略低于弹性基础的内容：百分之四十

$container-max-width: 1145px;
$gap: 4em;
width: calc(#{$container-max-width / 100 * 40} - #{$gap / 2} );

为什么它不能工作呢？本质上，我认为这可能取决于浏览器如何计算基于flex-basis元素的渲染。我不知道...