Why doesn't body width expand to the width of its child elements

Question

I'm trying to display a lot of data that requires a horizontal scroll.

It came to my attention that the body doesn't automatically resize to the width of its children. This becomes an issue because of the styling required on some of the other elements that should be automatically resized to match the element that extends beyond the viewport.

Unfortunately, it stops at the width of the body. You would think body would also resize to match the width of its children, but it doesn't.

How do I make it so body and/or the other elements automatically adjust? This occurs in chrome, firefox, edge, and ie11

See fiddle and code:

body {
  border: 1px solid red;
  padding: 1rem;
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

Answer 1

Unfortunately, it stops at the width of the body. You would think body would also resize to match the width of its children, but it doesn't.

That's how block elements work by default - by filling the viewport width. What you need is an inline element that extends only as much as its contents.

---

You can get the behavior that you want using inline-block - see demo below:

body {
  border: 1px solid red;
  padding: 1rem;
  display: inline-block; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

---

You can get the same effect using a column inline-flex container - see demo below:

body {
  border: 1px solid red;
  padding: 1rem;
  display: inline-flex; /* added */
  flex-direction: column; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

---

And you can also use width: min-content but note that this has an unexpected trimming of the body margin at the end - see demo below:

body {
  border: 1px solid red;
  padding: 1rem;
  width: min-content; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

Answer 2

Maybe it's default behaviour of body element. You can add this rule.

body {
    min-width: min-content;
}

body will automatically adjust to content other elements