当滚动量小于垂直滚动条

Question

我正在尝试在flex布局中放置一个可滚动区域，但是当我在嵌套框中需要水平和垂直滚动条时，在确定需要水平滚动条时不会考虑垂直滚动条（反之亦然）。

请参阅此示例：https://jsfiddle.net/mjkwbud4/

设置

.fixed div给出：

• 固定宽度为200px
• overflow: auto
• 内部块内容，宽度为200px，高度大于外部容器。

预期结果：

• 要显示的垂直滚动条，因为内容的高度大于适合
• 出现水平滚动条，因为垂直滚动条会占用空间，这意味着内部内容也不适合。

实际结果：

• 出现垂直滚动条，占用一些水平空间
• 尽管没有足够的水平滚动条，但不会出现水平滚动条。
• 使用鼠标滚轮显示您确实可以左右滚动，即使溢出：auto也认为不需要滚动。
• 更改溢出：自动溢出：滚动显示两个滚动条都处于活动状态。
• $0.scrollWidth > $0.clientWidth是真的 - 这是我问题的根源，我需要在这个布局中检测带有JS的滚动条

jsfiddle也包括一个灵活的容器。拖动窗口会显示水平滚动条在溢出时不会立即显示。

我在大多数浏览器中都有不同程度的看法，所以也许我不理解有关规范的内容？我应该如何在flex布局中放入x和y内容溢出？

当使用普通块元素执行此操作时，我不会遇到此问题，并且在显示/隐藏水平块时会减去垂直滚动条。我希望能够在flex中做到这一点，所以我可以填充高度。

Answer 1

当您使用display: flex时，会发生这种奇怪的布局中断，不确定是否有真正的解决方法，但我发现添加一些边框可以解决问题。因此，您可以为flex子类（.big）添加一个微小的transaprent边框，它不会影响您的布局并解决您的问题：

border: 1px solid transparent;

你可以看到它在这里工作：

＆＃13;

＆＃13;

.fixed, .flex { 
  overflow: auto;
}

.outer {
  flex: 1;
  height: 100px;
  display: flex;
  overflow: hidden;  
}

.fixed {
  color: #fff;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
  flex: 0 0 200px;
}

.flex {
  flex: 1 1 auto;
  background: #eee;
  display: flex;
}

.flex .big {
  flex: 1 0 500px;
}

.big {
  width: 199px;
  height: 200px;
  
  /* Just need to add a tiny transparent border here */
  border: 1px solid transparent;
}

＆＃13;

<div class="outer">
  <div class="fixed">
    <div class="big">This is a fixed width.</div>
  </div>
  <div class="flex">
    <div class="big">This is a flexible area.</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;