Outline not visible for inline elements

I have an anchor tag. I have given an outline to this anchor tag. But this outline is not visible unless the anchor tag has a display: flex.

Here in the below example, there are two anchor tags. The first one does not have a flex container, but the second one has. And you can see the outline for the first anchor tag is not visible, but the outline is visible for the second anchor tag.

Why is this so?

.link {  outline: 2px solid #000;}.link.flex {  display: flex;}.content {  padding: 20px;  border: 1px solid #ff2121;}

<a class="link" href=""><div class="content"><h4>This doesnot have a flex container</h4></div></a><a class="link flex" href=""><div class="content"><h4>This has a flex container</h4></div></a>