1

screenshot of the problem scrolling

normal state of the area

Example:

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

Basically, I've got myself a vertical flex container with items (not fixed sized, the right bar in the example) when the content is large enough for it to become scroll-able the scroll bar overlaps the container rather than increase the width of the container, but this problem is only apparent in the vertical bar, in the same example I got the horizontal container where it vertically expands the container to accommodated the scrollbar when resized.

I'm not sure whats going wrong as logically it should just expand to accommodate the extra content but it seems the scrollbar defy the laws of MY logic :p

I would appreciate any feedback or hints on this matter as I'm at a lost.

Edit: updated the fiddle to set max-width/height, also I'm looking for a cross browser solution as chrome seem to work sometimes but IE/Edge/FF show the wrong behaviour, I've added a screenshot of the actual problem where the content is being overlapped squeezed rather than pushed out.

arkhz
  • 291
  • 4
  • 20
Moe Abry
  • 21
  • 1
  • 4

1 Answers1

0

This seems to be a CSS issue. Overflow:auto seems to hide the content beneath the scroll.

My suggestion is to set the scroll to always being visible and removing overflow-auto. This might not be optimal, and if that's the case, you probably need to solve this by adding more css.

Example code with visible scroll:

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

Found another thread with similiar issues that might help out:

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

arkhz
  • 291
  • 4
  • 20
  • Thanks for that, but that didn't quite do the trick, I think my fiddle was wrong a bit too as i was trying to use style="resize: auto;" changing it to style="max-width:200px; max-height:200px;" to force the scrolling shows the issue still. another thing i forgot to highlight was the cross browser issue, Chrome seem to be a champ and do the job but IE(yes IE), Edge and FF still don't play ball. – Moe Abry Jul 31 '20 at 08:47
  • @MoeAbry No worries. I've updated the answer. Probably not the best solution, but it could be enough to help you out. – arkhz Jul 31 '20 at 19:49
  • 1
    well it something, not quite what I'm looking for but if i ever find a solution ill sure to update the thread. But thanks for the help :) – Moe Abry Aug 03 '20 at 15:45