Есть ли способ исправить эту ошибку CSS Flexbox и position absolute?

import React from 'react';
import { PropTypes } from 'prop-types';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleArrowRight } from '@fortawesome/free-solid-svg-icons';

function FilmCard({
  filmKey,
  title,
  release,
  image,
}) {
  const imageStyle = {
    backgroundImage: `url(${image})`,
    backgroundSize: 'cover',
  };
  return (
    <Link to = {`/FilmDetails/${filmKey}`} key = {filmKey}>
      <div className = "FilmCard" key = {filmKey} style = {imageStyle}>
        <FontAwesomeIcon icon = {faCircleArrowRight} className = "CircleArrow" />
        <div className = "FilmDescription">
          <h3>{title}</h3>
          <p>{release}</p>
        </div>
      </div>
    </Link>
  );
}

FilmCard.propTypes = {
  filmKey: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  release: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
};

export default FilmCard;

.FilmsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3rem;
}

.FilmCard {
  width: 20rem;
  height: 30rem;
  margin: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition:
    0.7s transform cubic-bezier(0.155, 1.105, 0.295, 1.12),
    webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12),
    box-shadow 0.7s;
}

.FilmCard:hover {
  transition-timing-function: ease-in-out;
  -moz-box-shadow: 13px 13px 0 0 black;
  -webkit-box-shadow: 13px 13px 0 0 black;
  box-shadow: 13px 13px 0 0 black;
  transform: scale(1.03);
}

.CircleArrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: white;
}