Display flex does not work with CSS property

I'm not able to use the following divs with the properties:

.grid {
  display: block;
}

@media (min-width: 992px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
}

.column.left {
  flex: 4;
  background-color: red;
}

.column.right {
  flex: 8;
  background-color: blue;
}

I realized that if I remove this:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

It works perfectly, but if I quit it does not work, the problem is that I need box-sizing

<main class="main">
      <section class="section">
        <div class="container">
          <div class="grid">
            <div class="column left">a</div>
            <div class="column right">a</div>
          </div>
        </div>
      </section>
    </main>