Question

使用flexbox时遇到Edge / IE问题。内容可能会溢出，因此我使用overflow-x: auto。 Flex方向为列，内容项为flex-grow:1，因此不需要溢出。但滚动条超出了内容。它似乎在考虑滚动条之前计算项目高度。仅当使用flex-direction列，行正常工作时才会出现此问题。

这里有一个jsfiddle，其中包含scroll-auto和hidden for overflow-x和-y的不同组合：https://jsfiddle.net/o1pv3b4o/5。

overflow-x:auto overflow-y:hidden：水平滚动条隐藏了内容。
overflow-x: scroll：解决问题，在考虑滚动条的同时正确计算高度。但内容可能不会溢出，从而显示禁用的滚动条。
overflow-x: auto：使用overflow-y: scroll|auto时有效。但在这两种情况下，它都会显示一个禁用的垂直滚动条。

有没有办法让它在不显示不必要的滚动条的情况下正确计算高度？

以下是HTML示例：

<div class='ctnr'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

和CSS：

.ctnr {
  display: flex;
  flex-flow: column wrap;
  background: orange;
  width: 400px;
  height: 225px;
  margin: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
}
.ctnr div {
  min-height: 80px;
  flex: 1 1 auto;
  width: 45%;
  margin: 0;
  border: 1px solid blue;
  background: lightblue;
}

Answer 1

这是edge .Credit到Robin Rendle

的解决方案

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

Edge / IE flex和滚动条问题

1 个答案: