Q:

How to make child element to expand horizontally parent element when overflowed?

I have a parent container with a child. When child is overflowed horizontally (i.e. bigger than browser window) it does not affect a parent. Is there any solution for parent to adjust width according to child if child is wider?
As a result both may be wider than screen, and I am OK with that.
I am not using any UI library (no bootstrap, etc.) If child is smaller than screen, both should adjust width to browser window.

<div style="border: 2px solid red">
    <div style="border: 2px solid blue; width:2000px">test</div>
</div>

A:

You can set the display of the outer div to inline-block:

<div style="border: 2px solid red;display:inline-block">
    <div style="border: 2px solid blue; width:2000px">test</div>
</div>

If you need to have both fill the screen when the child is less than the width of the screen, then both need min-width:100% and box-sizing:border-box (and you can remove the display-inline-block from the parent):

div {
  min-width: 100%;
  box-sizing: border-box;
}
<div style="border: 2px solid red;">
  <div style="border: 2px solid blue; width:300px">test</div>
</div>

