title: Keep 100% width inside an relative container?
body: <p>I have something like this</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;img-container&quot;&gt;
          &lt;img class=&quot;thumbnail&quot; src=&quot;https://via.placeholder.com/250x250&quot; /&gt;
          &lt;div classe=&quot;img-icon-container&quot;&gt;
              &lt;i class=&quot;photo-icon fas fa-camera-retro&quot; /&gt;
              &lt;span&gt;10&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  .container{
    height: 200px;
    display: flex;
    margin-bottom: 20px;
    .img-container {
      position: relative;
      .thumbnail {
        height: 100%;
      }
      .img-icon-container {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
        background-color: rgba(110, 110, 110, 0.8);
        i {
          margin-left: 5px;
          margin-right: 5px;
          font-size: 20px;
          color: white;
        }
        &amp;:hover {
          background-color: blue;
        }
      }
    }
  }
  </code></pre>
  <p>In chrome it looks as I wanted.</p>
  <p><a href="https://i.stack.imgur.com/0QCcn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0QCcn.png" alt="enter image description here" /></a></p>
  <p>but in IE 11 &amp; FF</p>
  <p><a href="https://i.stack.imgur.com/Lz9oj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lz9oj.png" alt="enter image description here" /></a></p>
  <p>What do I need to add to keep the gray bar contained in the div?</p>