当滚动量小于垂直滚动条时，flex布局中没有水平滚动条答案

【问题标题】：No horizontal scrollbar in flex layout when scroll amount is less than vertical scrollbar当滚动量小于垂直滚动条时，flex布局中没有水平滚动条
【发布时间】：2017-07-28 15:12:41
【问题描述】：

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

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

设置

给出了.fixed div：

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

预期结果：

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

实际结果：

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

jsfiddle 还包括一个灵活的容器。拖动窗口显示水平滚动条一溢出就不会出现。

我在大多数浏览器中都在不同程度上看到了这一点，所以也许我没有理解关于规范的一些深思熟虑的东西？我应该如何将溢出的 x 和 y 内容放入 flex 布局中？

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

【问题讨论】：

你有.big {flex: 1 0 500px;}。这意味着它将具有至少 500 像素的 flex-basis（在您的情况下为宽度）并且会增长以容纳内容。每当您调整窗口大小以使.big 的宽度小于500px 时，就会出现一个水平滚动条。有什么问题？你用什么浏览器测试？
问题是如果.big的容器小于500px，你应该得到一个滚动条，是的。但是，如果该容器也有一个垂直滚动条，例如16px，当容器小于 516px 时你应该得到一个滚动条。但你没有，所以容器的滚动宽度大于它的客户端宽度，但没有出现滚动条。如果事情以另一种方式完成，水平滚动条会按我的预期工作（并且与非 flex 一致）。编辑：太快按回车了。
比较这些截图。当宽度在小于容器但大于（容器-滚动条）的范围内时，我希望有一个水平滚动条，但没有出现。 overflow: scroll 有一个活动滚动条，但overflow: auto 没有可见滚动条。这个怎么可能？ Width greater than (container width - scrollbar width) --> no horizontal scrollbar Height greater than (container height - scrollbar height) --> yes vertical scrollbar

标签： html css flexbox

【解决方案1】：

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

border: 1px solid transparent;

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

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

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

【讨论】：