I have a "flip card" design with an image on the front side div and text on the back side div. The back of the card lets you scroll down with the mouse scroll wheel. The front of the card with the image does not even though there is a scrollbar showing. I have height defined and tried playing around with the overflow in different divs, but I can't get the front div to scroll down without you having to manually click the scrollbar.

CSS:

.cards {
    display: flex;
    flex-direction: row;
    padding: 0px;
}

.flip-card {
    background-color: transparent;
    perspective: 1000px;
    margin: 1em 1.4em 1em 0;
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 350px;
    height: 50vh;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.flip-card-front {
    justify-content: flex-start;
    align-items: baseline;
}

.flip-card-back {
    transform: rotateY(180deg);
    justify-content: center;
    align-items: center;
}

.flip-card-front,
.flip-card-back {
    display: flex;
    position: absolute;
    backface-visibility: hidden;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 15px;
    color: #222;
    background: whitesmoke;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    z-index: 1;
    /* Ensure unflipped card stays at the back */
    overflow-y: auto;
    /* makes it so there's no extra whitespace under image */
}

.flip-card:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #333;
}

HTML:

<ul class="cards">
                        <li class="flip-card" role="button" tabindex="0" aria-label="flip card" data-front="" data-back="text">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
    
                                </div>
                                <div class="flip-card-back">
                                    <p></p>
                                </div>
                            </div>
                        </li></ul>

I have a "flip card" design with an image on the front side div and text on the back side div. The back of the card lets you scroll down with the mouse scroll wheel. The front of the card with the image does not even though there is a scrollbar showing. I have height defined and tried playing around with the overflow in different divs, but I can't get the front div to scroll down without you having to manually click the scrollbar.

CSS:

.cards {
    display: flex;
    flex-direction: row;
    padding: 0px;
}

.flip-card {
    background-color: transparent;
    perspective: 1000px;
    margin: 1em 1.4em 1em 0;
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 350px;
    height: 50vh;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.flip-card-front {
    justify-content: flex-start;
    align-items: baseline;
}

.flip-card-back {
    transform: rotateY(180deg);
    justify-content: center;
    align-items: center;
}

.flip-card-front,
.flip-card-back {
    display: flex;
    position: absolute;
    backface-visibility: hidden;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 15px;
    color: #222;
    background: whitesmoke;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    z-index: 1;
    /* Ensure unflipped card stays at the back */
    overflow-y: auto;
    /* makes it so there's no extra whitespace under image */
}

.flip-card:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #333;
}

HTML:

<ul class="cards">
                        <li class="flip-card" role="button" tabindex="0" aria-label="flip card" data-front="" data-back="text">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
    
                                </div>
                                <div class="flip-card-back">
                                    <p></p>
                                </div>
                            </div>
                        </li></ul>

• html
• css
• overflow

1 Answer 1

<html>

<head>
  <title>Backface-Visibility</title>
  <style>
    body {
      font-family: arial, helvetica;
      background: #eee;
    }
    
    .card {
      width: 300px;
      height: 300px;
      border: 0px solid black;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -150px;
      perspective: 500px;
    }
    
    .content {
      width: 100%;
      height: 100%;
      position: absolute;
      transition: transform 1s;
      transform-style: preserve-3d;
    }
    
    .content.flipped {
      transform: rotateY(180deg);
    }
    
    .front,
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      background: #fff;
      color: tomato;
      font-size: 60px;
      text-align: center;
      line-height: 300px;
      border-radius: 5px;
      backface-visibility: hidden;
      overflow: auto;
    }
    
    .back {
      background: tomato;
      color: #fff;
      transform: rotateY(180deg);
    }
  </style>
</head>

<body>
  <div class="card" onclick="flipCard()">
    <div class="content" id="cardContent">
      <div class="front">Front Fro ntF ront Fro nFront Fro ntF ront Fro nFront Fro ntF ront Fro nFront Fro ntF ront Fro nFront Fro ntF ront Fro nt</div>
      <div class="back">Back!</div>
    </div>
  </div>

  <script>
    function flipCard() {
      const content = document.getElementById('cardContent');
      content.classList.toggle('flipped');
    }
  </script>
</body>

</html>

You have to use JS for back flipping on click... like this example