Background color cuts off at viewport edge

Question

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>

https://codepen.io/paulq/pen/gWpmWG (where the width is flexible now due container size something like this?) — Paulquappe, Apr 16 '17 at 11:46
You don't have a horizontal scrollbar now. I'm looking for a solution with a horizontal scrollbar (thanks) — klaasjansen, Apr 16 '17 at 17:50

score 3 · Accepted Answer · edited May 23 '17 at 12:09

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>

score 1 · Answer 2 · edited May 23 '17 at 12:02

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

Plus 1...and, IMHO, the linked _pseudo fix `::after { content: ""; flex: 0 0 30px; }`_ feels less intrusive than a transparent border and enables the `column`'s to be fully styled — Asons, Apr 16 '17 at 21:29
@LGSon, I agree that the flex pseudo element is a cleaner and nicer solution. But since the original code wasn't in flex layout, I didn't pursue flex methods with much intensity. — Michael Benjamin, Apr 16 '17 at 21:57
Thanks, but I cannot put the backgroundcolor to the body, because I wanted to create a zebra effect. @LGSon gave me the solution I was looking for by using inline-block for the rows — klaasjansen, Apr 17 '17 at 08:43
You should add the zebra-striping to your list of requirements. — Michael Benjamin, Apr 17 '17 at 11:44

Background color cuts off at viewport edge

2 Answers2

jsFiddle