“伪元素：后”元素的一部分覆盖overflow-x：hidden

Question

我已经用两个箭头构建了一个样本。基本上箭头是用标准框构建的 - 一个带有h2的箭头带有p

<header>
    <h2 class="maintitle">Test</h2>
    <p class="subtitle">Test about a test</p>
</header>

每个方框都有两个伪元素:before和:after。一个创建一个矩形，另一个将框展开到页面边框以获得无边框箭头。使用过的css看起来像那样。

  html,
  body {
    overflow-x:hidden;
  }

  .wrap {
    width: 50em;
    margin: 0 auto;
  }

  section {
    margin-top:6em;
    width:100%;
    background-color: green;
    height:30em;
  }

  .maintitle,
  .subtitle {
    height: 3.5rem;
    line-height: 3.5rem;
    position:relative;
  }

  .maintitle {
    background-color: orange;
    padding-left:1rem;
    top: -1.77rem;
    text-align: left;
    &:before {
        content: "";
        position:absolute;
        top:0;
        bottom:0;
        width: 999em;
        right:100%;
      background-color: orange;
    }
    &:after {
        content: "";
        position:absolute;
        top:0;
        bottom:0;
        width:999em;
        left:100%;
    }
  }

  .subtitle {
    text-align: left;
    left:0;
    top:-1.77rem;
    padding-left: 3rem;
      background-color: grey;

    &:before {
        content: "";
        position:absolute;
        top:0;
        bottom:0;
        width: 999em;
        right:100%;
    }
    &:after {
        content: "";
        position:absolute;
        top:0;
        bottom:0;
        width: 999em;
        left:100%;
    background-color: grey;

    }

  }

  @media(min-width: 800px) {
    .maintitle {

        text-align: right;
        padding-right:1rem;
        &:after {

            right:-1.75rem;
            width:0;
            height:0;
            background:transparent;
            border-top: 1.8rem solid transparent;
            border-left: 1.8rem solid orange;
            border-bottom: 1.8rem solid transparent;

      }
    }
    .subtitle {
        top: 0;
        left:1.75rem;
        padding-left: 1rem;

      &:before {
            left:-1.75rem;
            width:0;
            height:0;
            background:transparent;
            border-top: 1.77rem solid transparent;
            border-right: 1.77rem solid grey;
            border-bottom: 1.77rem solid transparent;
        }

    }
  }

显示输出的笔是here

问题是右边灰色箭头的伪元素忽略了例如overflow-x:hidden中的overflow-x:hidden语句。 safari（在chrome中有效）。如果你用鼠标点击并向右拖动你会得到类似的东西：

如果我删除了右边的伪元素并且只是广泛地放大了灰色框的宽度，则它会尊重.subtitle:after，如下面的pen所示。有没有办法让它与{{1}}版本一起正常工作？