want to make only close button overflow visible inside a modal - html

Question

I want to display full close button/text while maintaining modal's position:fixed and overflow:scroll
if i replace overflow:scroll with overflow:visible it appears fully but stops scrolling
<div id="root_component">
<div class="modal" >
<a class="modal-close btn-floating btn-small
waves-effect waves-light right clearfix">
<i class="material-icons">cancel</i>
</a>
<div class="modal-content"></div>
</div>
</div>
.modal {
width: 80% !important;
overflow-y: scroll;
z-index: 1003;
display: block;
opacity: 1;
transform: scaleX(1) scaleY(1);
position: fixed;
padding: 0;
margin: auto;
border-radius: 2px;
}
#root_component .clearfix {
position: absolute;
right: -16px;
top: -16px;
z-index: 100;
}
screenshot attached

Answer 1

Just wrap your .parent div in another .parent-wrapper div and take your .child div out of .parent. This works :
.grand-parent {
position: relative;
height: 10px;
width: 10px;
background: red;
top: 10px;
}
.parent-wrapper {
height: 150px;
width: 60px;
position: fixed;
}
.parent {
height: 150px;
width: 60px;
overflow: scroll;
background: blue;
}
.child {
overflow: visible;
position: absolute;
top: 10px;
left: 20px;
background: yellow;
}
<div class="grand-parent">
<div></div>
<div class="parent-wrapper">
<div class="parent">adfasdf<br> asdf
<br> asdf
<br> adsf
<br> asdfasd
<br> fads
<br> fdsaf
<br> sadfasd
<br> afdsf
</div>
<div class="child"> close</div>
</div>
</div>

Answer 2

If this is what you're trying to do, you have to make the .child class position fixed. The close button/text position will be fixed irrespective of scroll on the divs.
.grand-parent {
position: relative;
height: 10px;
width: 10px;
background: red;
top: 10px;
}
.parent {
height: 150px;
width: 60px;
overflow: scroll;
background: blue;
position: fixed;
}
.child {
overflow: visible;
position: fixed;
top: 20px;
left: 30px;
background: yellow;
}
<div class="grand-parent">
<div></div>
<div class="parent">adfasdf<br> asdf
<br> asdf
<br> adsf
<br> asdfasd
<br> fads
<br> fdsaf
<br> sadfasd
<br> afdsf
<div class="child"> close</div>
</div>
</div>