Some CSS is not working with window.print

Question

Hei guys, I am trying to print a page but some CSS is not working (I am using NuxtJS).

Here is the page that I want to print:

And here is what is printing:

As you can see the "semaphore" under the numbers (0, 0, 0) are well alined in the view but they are moving in the wrong position in the printing view.

Here is the CSS relative to the semaphore component:

.semaphore-container {
  display: flex;
  flex-flow: row;
}
.big-semaphore {
  height: $big-semaphore;
  width: 96px;
}

And this is the HTML:

    <b-row class="semaphore-container" :class="semaphoreSize === 'big' ? 'big-semaphore' : 'small-semaphore'">
      <b-col xs="4" class="hexagon-container">
        <green-hexagon class="hexagon" />
      </b-col>
      <b-col xs="4" class="hexagon-container">
        <yellow-hexagon class="hexagon" />
      </b-col>
      <b-col xs="4" class="hexagon-container">
        <red-hexagon class="hexagon" />
      </b-col>
    </b-row>

Bonus question: The printing view was manually scaled at 90% by me from the print window, otherwise the view would be even worst, this is how it looks on 100%:

So the yellow hexagon is standing on one line, the main content on another line and the expanding arrow on another line, the question is: Is it possible to force and scale the print view to look like it should? I have tried with body { zoom: 90%; }, but it does not work.

Thank in advance