Overflow:auto clipping top content?

Question

The issue is, that the popup is too long vertically, and when I try to add overflow-y: auto; to .popuptext.show it clips the top of the popup (the section with the first image and the name). Also, overflow-y should only put in a vertical scrollbar, but it also adds a horizontal one. Why is this the case?

HTML + CSS:

.item {
  width: 100px;
  text-align: center;
  display: block;
  background-color: transparent;
  border: 1px solid transparent;
  margin: 80px 0 0 50px;
  float: left;
}

.popup {
  position: relative;
  cursor: pointer;

  &--close {
    @include atMedium {
      width: 20%;
      position: relative;
      left: 84%;
    }
  }
  &--partnerimage {
    border-radius: 6px;
    width: 40%;
    height: 150px;
  }
  &--maxwidth {
    max-width: 247px;
  }
}

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  z-index: 1;
}

.popup .popuptext::after {
  content: "";
  position: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  backdrop-filter: blur(2px);

  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Black w/opacity/see-through */
  z-index: -1;
  border-color: #555 transparent transparent transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.popuptext.show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  position: fixed;
  top: 12%;
  justify-content: center;
  display: flex;
  flex-direction: column;
  width: 40%;
  height: 80%;
  overflow-y: auto;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

HTML:

<div class="container-fluid our-brands">
    <div class="container tagline text-center bbw">
        <img src="<?php echo get_theme_file_uri( '/images/dots.png' ); ?>;" width="45">
        <h2 class="tagline--h2 tagline--transparent tagline--relative-center">OUR BRANDS</h2>
        <h3 class="tagline--subheadline pt-2">REPRESENTED BY AUDMAX</h3>
        <h2 class="tagline--h2">OUR BRANDS</h2>


    </div>

    <div class="container d-flex flex-row">


        <?php if ( have_rows( 'brands' ) ) : ?>

        <?php
            while ( have_rows( 'brands' ) ) :
                the_row();
                ?>

        <div class="container col-3 d-flex partner">
            <div class="popup popup--maxwidth" onclick="popItUp()">
                <img src="<?php the_sub_field( 'brand_logo' ); ?>"></img>
                <span class="popuptext">
                    <span class="popup--close" onclick="popItUp()"><i class="fa fa-close" style="font-size:36px; color:white;"></i></span>
                    <img class="w-25 mx-auto pb-4" src="<?php the_sub_field( 'brand_logo' ); ?>"></img>
                    <h4 class="tagline--subheadline pt-2"><?php the_sub_field( 'title' ); ?></h4>
                    <img class=" mx-auto" src="<?php echo get_theme_file_uri( '/images/dots.png' ); ?>;" width="45">
                    <h5><?php the_sub_field( 'brand_description' ); ?></h5>
                    <h3 class="tagline--subheadline pt-2">Related posts</h3>
                    <img class="mx-auto pb-3" src="<?php echo get_theme_file_uri( '/images/dots.png' ); ?>;" width="45">

                    <div class="container mr-1">
                        <div class="d-flex">
                            <?php

                            $args = array(

                                'posts_per_page' => 2,
                            );

                            $my_query = new WP_Query( $args );

                            if ( $my_query->have_posts() ) {

                                while ( $my_query->have_posts() ) {

                                    $my_query->the_post();
                                    $posttags = get_the_tags();

                                    ?>

                            <div class="col-12 col-md-4 pr-0 pl-0 mr-4 posts posts--container flex-row"
                                style="background-image: url('<?php echo get_theme_file_uri( '/images/postbg.jpg' ); ?>">
                                <a href="<?php echo get_the_permalink(); ?>">
                                    <div class="posts posts--img" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>')" alt=""></div>
                                    <?php
                                    if ( $posttags ) {
                                        foreach ( $posttags as $tag ) {


                                        }
                                        ?>
                                    <h5 class="posts posts--tagname"><?php echo $tag->name . ' '; ?></h5>
                                    <?php } ?>
                                    <h3 class="posts posts--title"><?php echo the_title(); ?></h3>

                                    <h5 class="posts posts--tagname"><?php echo get_the_date(); ?></h5>
                                    <h6 class="posts posts--desc p-4"><?php echo get_the_content(); ?></h6>
                            </div>

                            </a>


                            <?php

                                }
                            }

                            // Reset the `$post` data to the current post in main query.
                            wp_reset_postdata();

                            ?>
                        </div>
                    </div>


                    <h3 class="tagline--subheadline pt-2">Partners</h3>
                    <img class="mx-auto pb-3" src="<?php echo get_theme_file_uri( '/images/dots.png' ); ?>;" width="45">
                    <div class="container partner d-flex justify-content-center">
                        <?php if ( have_rows( 'partner' ) ) : ?>

                        <?php
                            while ( have_rows( 'partner' ) ) :
                                the_row();
                                ?>



                        <div class="popup--partnerimage m-3" style="background-image: url(<?php echo the_sub_field( 'partner_image' ); ?>);"></div>



                        <?php endwhile; ?>

                        <?php else : ?>

                        <?php endif; ?>
                    </div>

            </div>
            </span>
        </div>
        <?php endwhile; ?>

        <?php else : ?>

        <?php endif; ?>

    </div>

</div>

Any help is appreciated!

Answer 1

Update: Manage to fix this particular issue by changing the div with class: container col-3 d-flex partner to d-block. For some reason display:flex was causing the issue.