title: Leaflet - Map "shadowed" and not clickable when size is set to a percentage
body: <p>I am trying to display a map on a container. I successfully display it when setting its size to a specific amount of px.
  However, I want the height to adapt to the container size.
  In order to do that, I had to set the height of every parents of the map container. Once done, the map appear &quot;shadowed&quot; and is not clickable, just as it was behind something. I can only zoom in and out.</p>
  <p>HTML :</p>
  <pre><code>&lt;div class=&quot;container-fluid&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col&quot;&gt;
        &lt;div id=&quot;mapid&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-2&quot; id=&quot;selection&quot;&gt;
        //
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>body {
      padding-top: 65px;
      margin: 0;
  }
  html, body, div {
      height: 100%;
      width: 100%;
  }
  #mapid { 
      height: 100%;
      width: 100%;
      align-self: center;
  }
  </code></pre>
  <p>The result:</p>
  <p><a href="https://i.stack.imgur.com/Xwsjj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xwsjj.png" alt="Result : map is grey and not clickable" /></a></p>