klaasjansen
Reputation: 557
Background color cuts off at viewport edge
I'm trying to create a row of divs that do not wrap and is scrollable with the regular page scrollbar (horizontal and vertical).
Only problem with my solution below is that the background-color (and right padding) of the row are not shown if I scroll to the right.
Requirements:
- I don't want scrollbars in the rows, only want to see a (horizontal and vertical) page scrollbar
- The background color of the rows are going to the end of the row (not like in the demo)
- Don't use a fixed width, because the width depends on the number of columns and they may grow in the future.
It's ok to use flexbox, etc.
.row {
background-color: #CCC;
padding: 30px;
white-space: nowrap;
}
.row:nth-child(odd) {
background-color: #AAA;
}
.column {
display: inline-block;
width: 50%;
margin-right: 5%;
white-space: normal;
vertical-align: top;
}
.column:last-of-type {
margin-right: 0;
}
.item {
padding: 10px;
background-color: #FFF;
margin-bottom: 10px;
border: 1px solid black;
}
.item:last-of-type {
margin-bottom: 10px;
}<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>Upvotes: 1
Views: 771
Answers (2)
Asons
Reputation: 87211
In addition to @Michael_B's well explained answer, another solution would be to use display: inline-block on the row, which, in opposite to block, grows with its content.
As you can't set a width on the row (will stop it from growing with content), you need to use viewport units (or any other unit other than percent) when setting the width and margin on the column, so with the given markup, where the row is set to take full width of the viewport, this might be a viable option.
.row {
background-color: #CCC;
padding: 30px;
white-space: nowrap;
display: inline-block;
}
.row:nth-child(odd) {
background-color: #AAA;
}
.column {
display: inline-block;
width: 50vw;
white-space: normal;
vertical-align: top;
margin-right: 5vw;
}
.column:last-of-type {
margin-right: 0;
}
.item {
padding: 10px;
background-color: #FFF;
margin-bottom: 10px;
border: 1px solid black;
}
.item:last-of-type {
margin-bottom: 10px;
}<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>Upvotes: 3
Michael Benjamin
Reputation: 371371
A block element by default extends to 100% width of its parent.
In your layout, that is exactly what is happening. The background-color on .row is covering the full with of its parent, body. Any overflow would not be included.
Therefore, instead of putting the background color on each .row element, put it on body.
Add this to your code:
body {
background-color: #ccc;
margin: 0;
}
The collapsing right padding appears to be caused by the element being "over-constrained". When this happens, the right margin / padding is ignored.
You can read more about that here: How can I stop the last margin collapsing in flexbox?
To fix the problem in your layout, try using a transparent border instead of padding.
Add this to your code:
.column:last-child {
border-right: 30px solid transparent;
}
body {
background-color: #ccc;
margin: 0;
}
.row {
display: flex;
padding: 30px;
white-space: nowrap;
}
.column {
flex: 0 0 50%;
white-space: normal;
}
.column + .column {
margin-left: 30px;
}
.column:last-child {
border-right: 30px solid transparent;
}
.item {
padding: 10px;
background-color: #FFF;
margin-bottom: 10px;
border: 1px solid black;<div class="row">
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>jsFiddle
Upvotes: 1
Related Questions
- Backgrounds cut off in scrolling flexbox inner elements
- Make background color extend into overflow area
- Setting a background color on only a part of the background
- Row-Flexbox with vertical scrollbar: background color is cut
- Overflow background beyond window's width
- background color doesn't stretch full height of div
- Background color gets cut off in a flex container
- Div color background error
- Flexbox background does not cover children on horizontal overflow
- Colored Background Stops at Bottom of Page, Not Content, Using Flex Layout