Overflow area of div has no style

Question

I'm trying to create a table like structure that is scrollable horizontally. To do that I have a wrapper div that has overflow-x: auto, a div for each row and a div for each cell.

I want to apply a style to the row but the style is only applied to those elements that are visible.

.inner {
  flex: 1 0 10em;
  height: 2em;
  background-color: green;
}

.outer {
  border-bottom: 10px solid red;
  display: flex; 
}

.box {
  width: 20em;
  overflow-x: scroll;
}

<div class="box">
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</div>

I want all of the green boxes to have a red bottom border, but the border only appears on those items that are not overflowing. What am I missing?

`.outer width` is the problem. think about it. – GottZ Mar 29 '18 at 11:55 — GottZ, Mar 29 '18 at 11:55

score 2 · Answer 1 · answered Mar 29 '18 at 11:59

You may try this instead:

.inner {
  flex: 1 0 10em;
  width:10em; /*Specify a width */
  height: 2em;
  background-color: green;
}

.outer {
  border-bottom: 10px solid red;
  display: inline-flex; /* to take the width of content and not container*/
}

.box {
  width: 20em;
  overflow-x: scroll;
}

<div class="box">
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</div>

score 0 · Answer 2 · answered Mar 29 '18 at 11:59

I dont know exactly what you mean, but I hope this helps: Since the CSS you use only for the outer,It does just that and put it only for the part that is visible. To achieve bottom red border for all of them, you have to put the border on the inner part.

HTML:

<div class="box">
<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
</div>
</div>

CSS:

.inner {
  flex: 1 0 10em;
  height: 2em;
  background-color: green;
  border-bottom: 10px solid red;
}

.outer {
  width: 20em;
  display: flex; 
}

.box {
  width: 20em;
  overflow-x: scroll;

}

Hope it helps :)

Overflow area of div has no style

2 Answers2