How to make a responsive Div element that grows in size on its own?

Question

css

How do I make a responsive Div element that after shrinking the browser screen width increases from 50% to 100% ?
JS Fiddle Link
That is, we need this behavior of the element.
Here the Child element is equal to 50% of its Parenta .
How to make it so that if the browser is gradually reduced from the left edge, the child element does not move, as soon as the edge of the screen touches the left edge of the Child element, then it gradually decreases in size to fit on the browser screen.

Answer 1

https://developer.mozilla.org/ru/docs/Web/CSS/Medi...
https://medium.com/@mchisti/two-css-tricks-thatll-...
https://jsfiddle. net/1us078x3/2/