CSS weird scroll behaviour workaround?

Question

I'm trying to find a workaround to the weird CSS overflow behaviour describe in this answer:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

I have a horizontally scrollable section with many card inside of it, I want each card to scale up when the user hover over it. I started with a simple

.card:hover{
    transform: scale(1.5);
}

that obviously resulted in a vertical scrollbar appearing on the horizontally scrollable section, for the rule described at the beginning.

So I tried modifying the position property to absolute on hover and also added a wrapper around the card to prevent other card from collapsing due to the previous element being removed from the document flow, this seems to work but also produces a very weird behaviour: if you scroll horizontally the hover effect kinda breaks, it only works if the mouse is positioned on an overlapping area between the card normal position and the hovered (absolute) position. Since the card gets absolutely positioned on hover, that position remains the same even if the user scrolls horizontally.

I'm trying to find a CSS/HTML only solution, if there is one. The ideal would be to either have both overflow-y: visibile and overflow-x: scroll or to find a way to calculate the top, left values according to the scrolled position of the cards.

Here is a minimal example (also on jsfiddle):

.container-wrapper{
  position: relative;
}

.container{
  width: 100%;
  display: flex;
  overflow-x: scroll;
  border: 1px solid orangered;
}

.wrapper{
  flex: 0 0 calc( 100% / 5);
}

.card{
  height: 100px;
  margin: 0 0.5em;
  background-color: blue;
}

.card:hover{
  width: 200px;
  position: absolute;
  transform: scale(1.4);
}


/* color */
.red{
  background-color: red;
}

.pink{
  background-color: pink;
}

.yellow{
  background: yellow;
}

.cyan{
  background: cyan;
}

.green{
  background: green;
}

<div class="container-wrapper">
  <div class="container">
    <div class="wrapper">
       <div class="card red"></div>
    </div>
    <div class="wrapper">
      <div class="card pink "></div>
    </div>
     <div class="wrapper">
       <div class="card yellow"></div>
    </div>
    <div class="wrapper">
      <div class="card cyan "></div>
    </div>
    <div class="wrapper">
       <div class="card red"></div>
    </div>
    <div class="wrapper">
      <div class="card green "></div>
    </div>
  </div> 
</div>

Hope I've been clear, thank you all.

CSS weird scroll behaviour workaround?

0 Answers0