I have a parent div inside that we have a ul element as a child.
please find the css code below:
#mainmenu { float: left; display: block; position: sticky; left: auto; z-index: 950; -webkit-user-select: none; user-select: none; min-height: 100vh; max-height: 100%; background: black; width: 50px; } #mainmenu input:checked ~ ul { transform: none; background: black; margin-left: 49px; visibility: visible; height: 100%; } #menu { visibility: hidden; z-index: 99; white-space: nowrap; margin-top: -18px; position: absolute; width: 300px; padding: 0px 25px 0px 0px; background: white; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0s cubic-bezier(0.77, 0.2, 0.05, 1); } please find the below HTML code for references:
<div id="mainmenu" class="parentmenu" style="min-height: 831px;max-height: 831px;overflow-y: auto;overflow-x: hidden;> <ul id="menu"> <li></li> </ul> </div> The parent div(mainmenu)has 50px width and child (menu)has 300px width,by default parent div will be visible all times and once clicking on the menu icon the child (ul) element will be shown.
I need to add overflow-y:auto,because the ul elements will be binded dynamically. when i am applying overflow to the parent div(mainmenu),it is affecting the width of the child(menu)element.
please check the images below for better understanding. 
I tried by applying different css properties but nothing worked the same issue is being repeated
Expected Result should be: The child element should show as first image by adding scroll to it and there should not be any affect on child element width.