Width of element with 'white-space: nowrap' doesn't adjust to child content

Add this line to .pane

display: inline-block;

Short answer :

block elements, like <div> take their parent's width by default (if no width is set), and will not expand further (even if the child content is overflowing). Which is not the case for inline elements, like <span>, which will take the child content's width instead.

So, by using inline-block you will benefit from both the child content's width & height and have what you want.

(Other solutions exist, for example : float: left;, position: absolute;, ...)

More explanations :

I was having the same issue, where I wanted to create a carrousel (or horizontally scrolling pane with tiling as asked by the OP) with padding at the end, so the last item would not be collapsed to the edge of the viewport.

So basically, you would have the carrousel element being scrollable (the frame), then a container for the tiles with the paddings (the pane) and finally the tiles (the items) :

body {
    margin: 20px;
}

.frame {
  overflow-x: scroll;
}

.pane {
  background-color: grey;
  padding: 20px;
  white-space: nowrap
}

.item {
  background-color: red;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.item:last-child {
  margin-right: 0;
}

<div class="frame">
  <div class="pane">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

As you can see, the padding is working at the beginning but not at the end, because the pane's width does not expand beyond the parent width (the frame's width in this case).

Adding display: inline-block; on the pane fixes the problem :

body {
    margin: 20px;
}

.frame {
  overflow-x: scroll;
}

.pane {
  background-color: grey;
  display: inline-block;
  padding: 20px;
  white-space: nowrap
}

.item {
  background-color: red;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.item:last-child {
  margin-right: 0;
}

<div class="frame">
  <div class="pane">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Modern solution (without white-space: nowrap;) :

Diverging a bit from the OP's question which was about the white-space: nowrap; rule, if you are searching for a more modern solution to create a carousel, you could achieve this using flex rules, as items in a flex container will not wrap by default, and it will also make the CSS a bit cleaner :

body {
    margin: 20px;
}

.frame {
  overflow-x: scroll;
}

.pane {
  background-color: grey;
  display: inline-flex;
  padding: 20px;
}

.item {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.item:last-child {
  margin-right: 0;
}

<div class="frame">
  <div class="pane">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>