Css 相对容器内的固定位置（带固定收割台的模式）

我试图创建一个带有固定标题的模式。这一切都很好，但我们已经在webkit浏览器中添加了一个自定义滚动条，使用：--webkit scrollbar。当我们这样做时，它会导致固定标题比模式标题宽一倍于自定义滚动条的宽度

**编辑：这仅在调整窗口大小/最小宽度生效时出现问题**

我的理解是，固定标题是基于整个窗口计算其最大宽度90%，模态是基于不包括滚动条的可用空间计算90%

我可以想到两种css方法来解决这个问题

1） 弄清楚我是不是很傻，有一种方法可以让固定元素依赖于相对父元素的大小

2） 如果模态的主体或父div具有伪选择器“添加样式”

可悲的是，以下情况不起作用：

div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open{
        width:calc(100% - $scrollbarwidth );
}

有什么想法吗

css:

html:

大模态定制
请张贴你的HTML。听起来你的overflow-y:auto在错误的div上。嘿@Lowkase谢谢你的关注。这是一个react项目，因此添加html并不容易，我会尝试将其编辑成我可以在这里发布的内容，但溢出是在正确的位置。它的工作方式非常接近现场演示works@ReganPerkins-我没有react的经验，但是如果它只与css相关，您就不能使用
calc（）
函数吗？这里有一个例子。如果这真的是你想要的，不确定。让
calc（）
在一个固定位置的div上完成这项工作效果很好。尝试将呈现的HTML复制到Inspector中？嘿@DavidDomain这正是我想放在div中的内容：：-webkit scrollbar._common-modal.is-open{calc（100%-$scrollbarwidth）；}但是该选择器无法发布HTML。听起来你的overflow-y:auto在错误的div上。嘿@Lowkase谢谢你的关注。这是一个react项目，因此添加html并不容易，我会尝试将其编辑成我可以在这里发布的内容，但溢出是在正确的位置。它的工作方式非常接近现场演示works@ReganPerkins-我没有react的经验，但是如果它只与css相关，您就不能使用
calc（）
函数吗？这里有一个例子。如果这真的是你想要的，不确定。让
calc（）
在固定位置的div上做这项工作效果很好。尝试将呈现的HTML复制到Inspector中？嘿@DavidDomain这正是我想放在div中的内容：：-webkit scrollbar._common-modal.is-open{calc（100%-$scrollbarwidth）；}但该选择器不起作用
.modal-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 100;
}

div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open {
  display: none;
}

._common-modal.is-open {
  bottom: 0;
  left: 0;
  outline: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  right: 0;
  top: 0;
  padding: 20px 0;
  text-align: center;
  z-index: 101;
}

._common-modal.is-open.header-detached .modal-header {
  position: fixed;
  top: -1px;
  width: inherit;
  max-width: 90%;
}

._common-modal.is-open.header-detached .modal-header:after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(85, 85, 85, 0.05);
}

._common-modal.is-open.header-detached .modal-content {
  margin-top: 50px;
}

._common-modal.is-open:before {
  content: " ";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

._common-modal.is-open .wkModal {
  text-align: left;
  position: relative;
  max-width: 90%;
  width: 500px;
  z-index: 2;
  background: #ffffff;
  border: 1px solid grey;
  display: inline-block;
  vertical-align: middle;
}

._common-modal.is-open .modal-header {
  border-bottom: 1px solid grey;
  padding: 0 15px;
  line-height: 51px;
  background-color: #fff;
  z-index: 2;
}

._common-modal.is-open .modal-footer {
  padding: 0 15px;
  line-height: 50px;
}

._common-modal.is-open .modal-title {
  font-size: 20px;
  text-align: center;
  font-weight: 300;
  width: 80%;
  margin: 0 auto;
}

._common-modal.is-open .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display: block;
  background: url(../img/blue_small-x.svg) no-repeat center center;
}

._common-modal.is-open .modal-content {
  padding: 10px 15px;
}

._common-modal.is-open .modal-content p {
  text-align: center;
}

<div class="_common-modal is-open">
        <div class="wkModal">
            <div class="modal-header" >
                <div class="modal-title">
                    <span >Large Modal Custom</span>
                </div><a class="modal-close"
                ></a>
            </div>
            <div class="modal-content" >
                <h1 Test Modal Content</h1>
                <div>
                    **content**
                </div>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>