I have a div inside another div with specific width but I want the child div to have width in percentage with browser screen size not its parent div?

Question

I have a div inside another div with specific width but I want the child div to have width in percentage with browser screen size not in percentage with its parent div, meaning when I set the width of the child div to 50%, I want its size to be 50% of the browser screen not 50% of its parent element, I don't want to remove it from the parent-child its important, any way to achieve this without removing it from being a child ?

PS- Please no answer in JQuery. Either CSS or Javascript. If it is achievable by css it would be really great, but javascript will also be fine.

Answer 1

You can use VW (ViewPort Width). Example :

.child {width : 50vw}

Answer 2

You should set your child div to position:fixed This is relative to the size of the view port.

#child {
  position: fixed;
  width: 100%;
}