Передний раздел карты в стиле флип-карты не прокручивается с помощью колеса прокрутки мыши — полоса прокрутки отображает ⇐ CSS

[Anonymous]

У меня есть дизайн «откидной карточки» с изображением на передней стороне div и текстом на обратной стороне. На обратной стороне карты можно прокручивать вниз с помощью колеса прокрутки мыши. На лицевой стороне карточки с изображением нет изображения, хотя отображается полоса прокрутки. Я определил высоту и попробовал поиграться с переполнением в разных элементах div, но не могу заставить передний элемент элемента управления прокручиваться вниз без необходимости вручную щелкать полосу прокрутки.
CSS:< /p>
.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:

Подробнее здесь: https://stackoverflow.com/questions/792 ... wheel-scro