Why is ::before pseudo element taking up room in flexbox?

I have a simple example here where I am setting ::before to provide a shade to the background. I do this on an element that is display: flex. I then set one of the flex items to flex: 1. Two things happen I don't like:

1. The flex:1 is ignored because the ::before takes up too much room, and
2. The ::before is not the full width as I would expect given width: 100%

Why is this happening? Is there a way to tell flex to ignore ::before& ::after?

Here is some screen shots. I would expect the width here to be 100% (200px)

And I would expect this flex:1 to fill the rest of the screen.

.test {  height: 200px;  width: 200px;  display: flex;  flex-direction: row-reverse;}.first {  background-color: green;}.second {  background-color: grey;  flex: 1;}body {  background-color: purple;}.test::before {  background-color: yellow;  content: "";  height: 100%;  width: 100%;  display: inline-block;  opacity: 0.04;}

<div class="test"><div class="first">&nbsp;</div><div class="second">&nbsp;</div></div>