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 item
s) :
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>