Resizing page only works some of the time

I'm getting some strange behavior when I adapt the height or width of my browser window when viewing a page I created. What I want to happen is for the elements in my page to resize themselves according to how much space is available - that is, adapt the amount of space they consume based on the viewport. My example uses flexbox.

I have some HTML I've created here:

<!doctype html>
<html lang="en-US">
<head>
  <title>SOMEPLACE</title>
</head>
<body>

<div class="half-half-outer-container">
  <div class="half-half-container">
    <div class="left-side image-bg"></div>
<div class="right-side">
<div class="login-form">
  <form>
    <header class="no-border">
      <h2>Welcome to Someplace</h2>
    </header>
    <div class="form-fields">
<div class="form-group theme-grain">
  <label for="username-field">Email or Username</label>
    <input type="text" id="username-field" value="" placeholder="" class=" " />

</div>
<div class="form-group">
  <label for="password-field">Password</label>
  <div class="field-icon-container">
    <input type="password" id="password-field" value="" placeholder="" class=" " />
    <i class="fa fa-fw fa-eye field-icon foamfactory-show_password" aria-label="password-visibility-control" aria-hidden="true" aria-controls="password-field"></i>
  </div>

</div>
      <a href="javascript:void(0);">Forgot your username/password?</a>
    </div>
    <footer>
      <button>Sign In</button>
    </footer>
  </form>
</div>
</div>
  </div>
</div>
</body>
</html>

Along with the CSS:

body {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Work Sans', sans-serif;
  height: 100%;
  width: 100%;
}

// Flexbox "Half and Half Container" - a container that is divided into two
// columns, each of which consuming 1/2 of the available space.
.half-half-outer-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .half-half-container {
    align-items: center;
    display: flex;
    height: 100vh;
    width: 100%;

    .left-side {
      flex: 1 1 50%;
    }

    .right-side {
      flex: 1 1 50%;
    }
  }
}

.image-bg {
  background-image: url('https://tashasoyster.com/wp-content/uploads/2018/06/P1030493-1440x1828.jpg');
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

You can also access it here:

https://codepen.io/jwir3/pen/mgKNNo

Basically, it's a flexbox that divides the available space in half from left to right (the image is just one I found on the web, it's the not the image I'm actually using).

If you look at that codepen and resize it, the rendered content at the bottom resizes accordingly. However, if you right click in the rendered content, select "This Frame -> Open Frame in New Window (I'm using Firefox), it now no longer resizes.

I'm actually using Rails, and when I start the server from within RubyMine, it doesn't resize like I want it to. However, if I change a property like the body tag's height, and set it to, say 100% instead of 100vh, it will resize as I expect unless I open it in a new tab, at which point, it will fail to resize as expected once more.

Solution

For posterity, this appears to be an issue with the CodeClimate plugin I have enabled in Firefox. Disabling it causes the issue to be resolved.