html - I have a scrollable-x div on top of an embedded map, but the map takes control instead

Question

I'm trying to have a scrollable-x ul that lays on top of an embedded google map. The issue I'm having is that I'm not able to scroll inside that list because the map thinks I'm trying to use it instead.

If I change the map container to display: none;, then the ul works as expected.

Here's a picture for reference:

Here's some of the code:

.search_map-con {
  /*display: inline-block;*/
  width: calc(100% - 30vw);
  height: 93vh;
  float: right;
  background-color: #ECEAE4;
}
.google_map-api {
  width: 100%;
  height: 100%;
}





@media only screen and (max-width: 915px) {
      .search_map-con {
        top: 70px;
        left: 0;
        width: -webkit-fill-available;
        z-index: -100;
      }
      .list-con {
        background-color: transparent;
        max-width: none;
        position: absolute;
        bottom: 10px;
        width: 100vw;
        height: 10em;
        overflow-y: hidden;
        border: 2px solid red;
      }
    
      .list-con ul {
        display: block;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
      }

<header>...</header>

<div class="list-con">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>



<div class="search_map-con">
    <iframe class="google_map-api" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d212854.00762677827!2d-86.9902205642447!3d33.53144475097121!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1611529605673!5m2!1sen!2sus"></iframe>
  </div>

<footer>...</footer>

question from:https://stackoverflow.com/questions/65930151/i-have-a-scrollable-x-div-on-top-of-an-embedded-map-but-the-map-takes-control-i

Answer 1

Waitting for answers