3

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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Dave Maison
  • 383
  • 1
  • 13

4 Answers4

3

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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
1

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

Vsevolod Fedorov
  • 481
  • 1
  • 7
  • 20
0

you can manage this by adding small css in your "#extra-long" as following:

<style>
#extra-long{
white-space: nowrap;
}
</style>

by adding above css your text will always go in a single line and me a scroll automatically.

Fateh singh Jagdeo
  • 173
  • 1
  • 10
  • The issue isn't with text-wrapping, but the width of the container. It will automatically stop at the edge of the body, while allowing the children to overflow – Dave Maison May 20 '19 at 18:30
0

You haven't provided a width to the 2nd div, just a background color:

    #other-element {
  background-color: cornflowerblue;
  width: 200vw;
}
nadr
  • 17
  • 8
  • This presents the problem that the width then can only be 200vw instead of automatically expanding to the width of the content. – Dave Maison May 20 '19 at 18:31