我如何滚动父项 div，其中子项 div 溢出？

Question

所以，我有一些代码大致如下所示：

.Overview {
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  background-color: lightgray;
}

.OverviewResourceHeader {
  display: inline-block;
  width: 30%;
  float: left;
  margin-right: -4px;
  border-width: 1px;
  border-style: solid none solid solid;
}

.OverviewResourceTypeHead {
  width: 40%;
  border-style: none solid none none;
  border-width: 1px;
  display: inline-block;
  text-align: center;
  height: 53px;
}

.OverviewResourceHead {
  width: 60%;
  display: inline-block;
  text-align: center;
}

.OverviewTimeHeader {
  display: inline-block;
  width: 70%;
  float: right;
  border-width: 2px;
    border-color: red red red red;
    margin-right: -4px;
}
.OverviewDays{
    overflow-x: hidden;
    white-space: nowrap;
    border-style: none solid solid solid;
    border-width: 1px;
    height: 17px;
    overflow-y:hidden;
    
}

.OverviewDay{
    display: inline-block;
    border-width: 1px;
    border-style: none solid none none;
    width: 20px;
    text-align: center;
    overflow: hidden;
    
}

.OverviewWeeks{
    overflow: hidden;
    white-space: nowrap;
    border-style: none solid solid solid;
    border-width: 1px;
    height: 17px;
    overflow-y: hidden;
}

.OverviewWeek{
    display: inline-block;
    border-width: 1px;
    border-style: none solid none none;
    width: 140px;
    text-align: center;
    overflow-x: hidden;
    
}

.OverviewMonths{
    overflow: hidden;
    white-space: nowrap;
    border-style: solid solid solid solid;
    border-width: 1px;
}

.Overview31Month{
    display: inline-block;
    border-right: 1px;
    border-style: none solid none none;
    width: 620px;
    text-align: center;
}

.Overview30Month{
    display: inline-block;
    border-right: 1px;
    border-style: none solid none none;
    width: 600px;
    text-align: center;
}

<div class="Overview">
  <div class="OverviewResourceHeader">
    <div class="OverviewResourceTypeHead">Type</div>
    <div class="OverviewResourceHead">Resource</div>
  </div>
  <div class="OverviewTimeHeader">
    <div class="OverviewMonths">
      <div class="Overview31Month">October 2017</div>
      <div class="Overview30Month">November 2017</div>
      <div class="Overview31Month">December 2017</div>
    </div>
    <div class="OverviewWeeks">
      <div class="OverviewWeek">Week 39</div>
      <div class="OverviewWeek">Week 40</div>
      <div class="OverviewWeek">Week 41</div>
      <div class="OverviewWeek">Week 42</div>
      <div class="OverviewWeek">Week 43</div>
      <div class="OverviewWeek">Week 44</div>
      <div class="OverviewWeek">Week 45</div>
      <div class="OverviewWeek">Week 46</div>
      <div class="OverviewWeek">Week 47</div>
      <div class="OverviewWeek">Week 48</div>
      <div class="OverviewWeek">Week 49</div>
      <div class="OverviewWeek">Week 50</div>
      <div class="OverviewWeek">Week 51</div>
      <div class="OverviewWeek">Week 52</div>
    </div>
    <div class="OverviewDays">
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
    </div>
  </div>

</div>

带有OverviewTimeHeader的元素css class有3个子div，都被其子元素溢出，上面有overflow:hidden，以免出现三个滚动条.不过，我需要能够滚动 overviewTimeHeader，并且尝试在 css classes 中移动溢出属性对我没有任何用处，所以我开始怀疑它是否可能。我也尝试过使用 jquery-mousewheel 插件，但似乎无法滚动带有隐藏溢出的元素，所以我对如何处理这个问题感到很茫然。我认为 css 更可取，但我无法管理任何接近它的东西。

（不要介意日期和星期的对齐缺失，它适用于我拥有的更完整的模型，这根本不是问题）

Answer 1

这就是你想要做的吗？如果是这样，您只需要一个卷轴 - 在您的 OverviewTimeHeader class:

.OverviewTimeHeader {
    overflow-x: scroll;
    /* rest of your styles here */
}

工作示例：

.Overview {
  width: 100%;
  white-space: nowrap;
  /* overflow-x: auto;  */
  background-color: lightgray;
}

/* ADD THIS TO CLEAR THE FLOATS */
.Overview:after {
  content: "";
  display: table;
  clear: both;
}
.OverviewResourceHeader {
  display: inline-block;
  width: 30%;
  float: left;
  margin-right: -4px;
  border-width: 1px;
  border-style: solid none solid solid;
}

.OverviewResourceTypeHead {
  width: 40%;
  border-style: none solid none none;
  border-width: 1px;
  display: inline-block;
  text-align: center;
  height: 53px;
}

.OverviewResourceHead {
  width: 60%;
  display: inline-block;
  text-align: center;
}

.OverviewTimeHeader {
  overflow-x: scroll;   /* ADDED THIS */
  display: inline-block;
  width: 70%;
  float: right;
  border: 2px solid red;
  margin-right: -4px;
}
.OverviewDays{
    /* overflow-x: hidden;  */
    white-space: nowrap;
    border-style: none solid solid solid;
    border-width: 1px;
    height: 17px;
    /* overflow-y:hidden; */
    
}

.OverviewDay{
    display: inline-block;
    border-width: 1px;
    border-style: none solid none none;
    width: 20px;
    text-align: center;
    /* overflow: hidden; */
    
}

.OverviewWeeks{
    /* overflow: hidden; */
    white-space: nowrap;
    border-style: none solid solid solid;
    border-width: 1px;
    height: 17px;
    /* overflow-y: hidden; */
}

.OverviewWeek{
    display: inline-block;
    border-width: 1px;
    border-style: none solid none none;
    width: 140px;
    text-align: center;
    /* overflow-x: hidden; */
    
}

.OverviewMonths{
    /* overflow: hidden; */
    white-space: nowrap;
    border-style: solid solid solid solid;
    border-width: 1px;
}

.Overview31Month{
    display: inline-block;
    border-right: 1px;
    border-style: none solid none none;
    width: 620px;
    text-align: center;
}

.Overview30Month{
    display: inline-block;
    border-right: 1px;
    border-style: none solid none none;
    width: 600px;
    text-align: center;
}

<div class="Overview">
  <div class="OverviewResourceHeader">
    <div class="OverviewResourceTypeHead">Type</div>
    <div class="OverviewResourceHead">Resource</div>
  </div>
  <div class="OverviewTimeHeader">
    <div class="OverviewMonths">
      <div class="Overview31Month">October 2017</div>
      <div class="Overview30Month">November 2017</div>
      <div class="Overview31Month">December 2017</div>
    </div>
    <div class="OverviewWeeks">
      <div class="OverviewWeek">Week 39</div>
      <div class="OverviewWeek">Week 40</div>
      <div class="OverviewWeek">Week 41</div>
      <div class="OverviewWeek">Week 42</div>
      <div class="OverviewWeek">Week 43</div>
      <div class="OverviewWeek">Week 44</div>
      <div class="OverviewWeek">Week 45</div>
      <div class="OverviewWeek">Week 46</div>
      <div class="OverviewWeek">Week 47</div>
      <div class="OverviewWeek">Week 48</div>
      <div class="OverviewWeek">Week 49</div>
      <div class="OverviewWeek">Week 50</div>
      <div class="OverviewWeek">Week 51</div>
      <div class="OverviewWeek">Week 52</div>
    </div>
    <div class="OverviewDays">
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
    </div>
  </div>

</div>

我已经注释掉了我删除的 overflow，这样您就可以看到我更改了什么。

您还需要一个 "clearfix" 用于您的浮动 div（我已添加），并且您有一些具有浮动和内联块的 div（例如 OverviewResourceHeader）- 一旦您将其浮动， inline-block 不再适用，因此您不需要两者。

我如何滚动父项 div，其中子项 div 溢出？

How can i scroll a parent div, where the childs child divs are overflowing?

html

css

jquery

scroll

overflow