Flexitem min-height: 100% and fixed margin overflowing container - html

Question

Given a .mainContainer which display was flex, I wanted to make a box with vertical separation lines. The restriction was that the separators shouldn't use all the vertical space, so my approach was giving it a fixed margin and making the separator use all the vertical space posible using min-height: 100% .
Like this:
<div class="mainContainer">
<div class="flexContainer">
<div class="text"> Text 1</div>
<div class="separator"></div>
<div class="text"> Text 2</div>
<div class="separator"></div>
<div class="text"> Text 3</div>
</div>
</div>
With the following styles:
.mainContainer {
display: flex;
}
.flexContainer {
display: flex;
}
.text {
background-color: #000;
color: #fff;
padding: 8px;
}
.separator {
min-height: 100%;
margin: 8px 0;
width: 4px;
background-color: red;
}
However, the separator did end overflowing the container using 100% of its height and adding the fixed margin over it.
The weird part is that changing the display of the .mainContainer from flex to block solved this issue. Can someone explain me this behavior?