Chrome not stretching display:table elements in flex container - css

Question

There are a lot of questions about vertical centering, the occasional flexbox-stretching oddity, or the difference between block and table elements, but I couldn't find anything about the (unexpected) behavior of this particular combination.
I'm in a bit of a tricky situation with the markup bootstrap-vue is giving me:
#navbar-container {
/* Given */
position: relative;
display: flex;
width: 100%;
}
#navbar {
/* Given */
flex-grow: 1;
display: flex;
flex-direction: row;
/* For illustration */
background-color: red;
}
.nav-item {
/* Given */
flex-grow: 1;
text-align: center;
/* Added to center .nav-link content vertically */
display: table;
/* Without this Chrome and Edge don't stretch to the height of #navbar(-container), but Firefox does */
/*height: 100%;*/
}
.nav-link {
/* Added to center content vertically */
display: table-cell;
vertical-align: middle;
/* Should cover #navbar's red background */
background-color: lightgreen;
}
<div id="navbar-container">
<div id="navbar">
<div id="brand">
<!-- Gives height to #navbar -->
<img src="https://via.placeholder.com/100">
</div>
<div class="nav-item">
<a class="nav-link">
Item 1
</a>
</div>
<div class="nav-item">
<a class="nav-link">
Item 2
</a>
</div>
<div class="nav-item">
<a class="nav-link">
Item 3
</a>
</div>
</div>
</div>
I'm trying to vertically center the content of .nav-link across the full height of #navbar.
Keep in mind that I can't change anything about the markup here, it's given to me by the framework.
Since #navbar (implicitly) has align-items: stretch, I would assume that .nav-item is stretched to the height of #navbar. Firefox agrees, but Chrome and Edge don't.
The interesting part is that this happens only with display: table elements.
Any other display value (correctly) stretches .nav-item to the height of #navbar.
Note that .nav-link doesn't automatically stretch along in that case, but that's to be expected.
Adding height: 100% to .nav-item fixes the problem, but I can't understand why this is necessary.
I'm not looking for alternative vertical-centering solutions, adding the height works fine.
Using nested flexbox or line-height poses other (architectural) issues.
I suppose at this point I'm mostly curious why this happens, and perhaps more importantly: which browser is in the wrong here?

Answer 1

Here you go with officlal doc.
Table elements have an internal 'table wrapper box'. This wrapper is stretched, but the actual table itself isn't stretched to that box. The table height only grows with its content, or when you specify a height.
It's unclear why, but Firefox apparently does stretch the actual table automatically.