inline-flex style is not completely inline with ordered list

Question

I have breadcrumb component composed from <ol> with <li> breadcrumb items. Component should be styled as block element, but content should be inlined.

Some breadcrumb items uses internally flexbox layout so I set those items as display: inline-flex;.

When I mark entire breadcrumb for copy paste and display copied text in text editor I see that items which are display: inline are truly inlined, but display: inline-flex are wrapped with new-lines.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* display: flex; */  /* this breaks even display: inline */
}

ul.inline li {
  display: inline;
}

ul.inline-block li {
  display: inline-block;
}

ul.inline-flex li {
  display: inline-flex;
}

ul.inline-combined li {
  display: inline;
}

ul.inline-combined li:nth-child(2) {
  display: inline-flex;
}

<p>Copy UL from page and see the difference in some text editor</p>
<p>There is difference in new-lines in paster text between items</p>

<h3>UL by inline</h3>
<ul class="inline">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<h3>UL by inline-block</h3>
<ul class="inline-block">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<h3>UL by inline-flex</h3>
<ul class="inline-flex">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<h3>UL by combined inline and inline-flex</h3>
<ul class="inline-combined">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>