Where is the margin/spacing coming from?

Question

I have 2 inline flex container in this test. I'm specifically referring to the test that says Then The flex containers are laid out inline.

There is a little bit of space between the container, but when I look in the chrome developer tools at the at the margin box I don't see a margin being rendered on either container, so I'm just curious where the space comes from?

Here's a picture of the test, just to make sure it's clear:

Answer 1

Well it seems that inline-flex is similar to inline-block in the way that it takes into account the whitespace that you have in your HTML markup between the containers. So juste remove the whitespace between the u-flex-inline:

<div class="Test_render">
  <div class="u-flex-inline
              u-background-color-orange
              u-padding-1rem
              u-border-right-style-solid
              u-border-right-width-2px">
              First container</div><!--
  --><div class="u-flex-inline
              u-background-color-orange
              u-padding-1rem">
              Second container</div>
          </div>