滚动时不显示样式

Question

当我滚动背景并且边框样式不应用于内部div时，我有一个滚动div的问题。

我试图在这里简化问题;

https://jsfiddle.net/w498trmf/22/

.GridScrollOuter {
  overflow-x: hidden;
  white-space: nowrap;
}

.GridScrollHeader {
  overflow-x: auto;
}

.GridHeader {
  background-color: #c8ffbb !Important;
  color: red;
  border-top: 1px solid #337ab7;
  border-bottom: 1px solid #337ab7;
}

.Column {
  width: 50%;
  display: inline-block;
}

<div class="GridScrollOuter">
  <div class="GridScrollHeader">
    <div class="GridHeader">
      <div class="Column">
        <button>Button1</button>
      </div>
      <div class="Column">
        <button>Button2</button>
      </div>
      <div class="Column">
        <button>Button3</button>
      </div>
    </div>
  </div>
</div>

Answer 1

这是因为你有

.Column {
  width: 50%;
  display: inline-block;
}

三个divs，宽度为50％，因此宽度为150％。而.GridHeader只是100% width。

试试这个：让你的.GridHeader宽150％

.GridHeader {
  background-color: #c8ffbb !Important;
  color: red;
  border-top: 1px solid #337ab7;
  border-bottom: 1px solid #337ab7;
  width: 150%;
}

和你的.Column 33％宽度：

.Column {
  width: 33%;
  display: inline-block;
}

或者，如果你总是有不同数量的divs，那么忘记width并将这些类添加到.GridHeader：

.GridHeader {
    display: flex;
    justify-content: space-between;
}

这是非常数内部div的代码片段。

.GridScrollOuter {
  overflow-x: hidden;
  white-space: nowrap;
}

.GridScrollHeader {
  /*background-color: #c8ffbb !Important;
  border-top: 1px solid #337ab7;
  border-bottom: 1px solid #337ab7;*/
  overflow-x: auto;
}

.GridHeader {
  background-color: #c8ffbb !Important;
  color: red;
  border-top: 1px solid #337ab7;
  border-bottom: 1px solid #337ab7;
  width: 150%;
  display: flex;
  justify-content: space-between;
}

<div class="GridScrollOuter">
  <div class="GridScrollHeader">
    <div class="GridHeader">
      <div class="Column">
        <button>Button1</button>
      </div>
      <div class="Column">
        <button>Button2</button>
      </div>
      <div class="Column">
        <button>Button3</button>
      </div>
    </div>
  </div>
</div>