Prevent truncating of the box-shadow by "overflow: hidden" without paddings - html

Question

Why I don't accept the padding solution of CSS overflow: hidden cuts shadow question is the paddings are the geometry and the box-shadow is the decoration; the decoration must not force the changing of geometry.
The conflict situation example
Suppose we have two themes for button component: with shadows and without shadows. To adapt the second theme with paddings, we need:
To interfere the geometry settings
To know the size of shadows.
And also: what if we place the element with different shadows in one container? We need to know the each shadow size?
About Z-Index solution
Generally, it does not work. There are the unknown for me conditions when it works so if you suggest this solution I ask you to clarify the conditions when it works.
The example which you can use is solution
The .Modal-MainSection element has overflow-y: scroll; settings for the cases when modal content is too large. Because of this, the shadow of buttons has been truncated:
<div class="Layout">
<div class="Modal">
<div class="Modal-TitleSection">
<div class="Modal-DummyTitle"></div>
</div>
<div class="Modal-MainSection">
<div class="Modal-DummyContent"></div>
<div class="Modal-ButtonsBar">
<button class="Button">Cancel</button>
<button class="Button">OK</button>
</div>
</div>
</div>
</div>
html {
height: 100%;
}
body {
height: 100%;
}
.Layout {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: #B2EBF2;
}
.Modal {
display: flex;
flex-direction: column;
width: 220px;
border-radius: 4px;
padding: 12px 14px;
overflow: hidden;
background: #42A5F5;
}
.Modal-TitleSection {
flex: 0 0 auto;
}
.Modal-DummyTitle {
width: 100px;
height: 20px;
background: #1976D2;
}
.Modal-MainSection {
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
margin-top: 12px;
}
.Modal-DummyContent {
height: 140px;
background: #1976D2;
}
.Button {
border: none;
padding: 6px 8px;
box-shadow: 0 0 4px 4px #FFA726;
}
.Button + .Button {
margin-left: 12px;
}
.Modal-ButtonsBar {
margin-top: 12px;
display: flex;
justify-content: flex-end;
}
🌎 Fiddle
Also, assume that the buttons bar is the custom content. It means be does not know at advance when developing the modal component will be the buttons bar or no and which buttons will be.