Fixed position inside relative container (modal with fixed header) - css

Question

I am trying to create a modal with a fixed header. This was all working fine but we have since added a custom scroll bar in webkit browsers using ::-webkit-scrollbar. When we did this it causes the fixed header to be wider then the modal by the width of the custom scroll.
** edit: this is only an issue when resizing the window/when min-width kicks in **
My understanding is the fixed header is calculating its max width of 90% based on the whole window and the modal is calculating 90% based on the available space not including the scrollbar.
There are two css ways of fixing this that I can think of.
1) figure out if I am just being silly and there is a way of making a fixed element depend on the size of the relative parent.
2) if the body or the parent div of the modal has the pseudo selector add styles.
Sadly the following does not work:
div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open{
width:calc(100% - $scrollbarwidth );
}
Any thoughts?
css :
.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;
}
html:
<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>