溢出：带 flex 的自动导致滚动条与内容重叠

Question

screenshot of the problem scrolling

normal state of the area

例子：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex overflow-hidden" style="max-width:200px; max-height:200px;">
  
  <div class="d-flex flex-column flex-fill bg-warning overflow-hidden">   
    <div class="d-flex flex-fill bg-success"></div>
    <div class="d-flex flex-shrink-0 overflow-auto"> 
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
    </div>  
  </div>  
  
  <div class="d-flex flex-column flex-shrink-0 bg-dark overflow-auto">
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
  </div>
</div>

https://jsfiddle.net/p6khs5q9/

基本上，当内容足够大以至于可以滚动时，我为自己准备了一个带有项目的垂直 flex 容器（不是固定大小，示例中的右侧栏），滚动条与容器重叠而不是增加容器的宽度，但是这个问题只在垂直条中很明显，在同一个例子中，我得到了水平容器，它在调整大小时垂直扩展容器以容纳滚动条。

我不确定出了什么问题，因为逻辑上它应该只是扩展以容纳额外的内容，但滚动条似乎违反了我的逻辑规律：p

如果我不知所措，我将不胜感激有关此问题的任何反馈或提示。

编辑：更新了小提琴以设置最大宽度/高度，我也在寻找一个跨浏览器解决方案，因为 chrome 有时似乎可以工作，但 IE/Edge/FF 显示错误的行为，我添加了一个截图内容重叠的实际问题是挤压而不是推出。

Answer 1

这似乎是一个 CSS 问题。溢出：自动似乎隐藏了滚动下方的内容。

我的建议是将滚动设置为始终可见并删除overflow-auto。这可能不是最优的，如果是这种情况，您可能需要通过添加更多 css 来解决这个问题。

带有可见滚动的示例代码：

.custom-scroll {
  overflow-y: scroll;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex overflow-hidden" style="max-width:200px; max-height:200px;">
  
  <div class="d-flex flex-column flex-fill bg-warning overflow-hidden">   
    <div class="d-flex flex-fill bg-success"></div>
    <div class="d-flex flex-shrink-0 overflow-auto"> 
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
    </div>  
  </div>  
  
  <div class="d-flex flex-column flex-shrink-0 bg-dark custom-scroll">
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
  </div>
</div>

https://jsfiddle.net/vgns8owj/

找到另一个可能有帮助的类似问题的帖子：

“overflow-y: scroll;” is hiding overflowing elements on the horizontal line