溢出:带有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