滚动

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;
}

宽度为50％的三个div，因此它的宽度为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;
}

或如果您的div数量始终不同，请忘记width，只需将这些类添加到.GridHeader：

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

以下是非常数内部div的代码段。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;