Why does min-height: 100vh; not work in Firefox properly?

Question

Please consider the following styles:

#firstsection {
  display: table;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-image: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&h=350);
  background-position: top;
  background-repeat: no-repeat;
}

#firstsection .firstsection-inner {
  display: table;
  width: 100%;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}

#firstsection .firstsection-margin-top {
  margin-top: 10%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section id="firstsection">
  <div class="firstsection-inner">
    <div class="container firstsection-margin-top">
      <div class="row">
        <div class="col-md-12">
          <h1>Heading1</h1>
        </div>
        <div class="col-md-12">
          <h2>Heading</h2>
          <div class="row">
            <div class="col-md-4 text-center mb-3">
              <p>
                Some text.
              </p>
            </div>
            <div class="col-md-8">
              <p>
                Some text.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

With Google Chrome I get the expected 100vh, that means the whole monitor is filled with my firstsection. With firefox (61.0.2), it isn't - it's somewhere cut off in the middle. So my question is, how could I make the code above behave the same way in all browsers (or at least firefox) as it bahaves in Google Chrome (use the whole 100vh)?