inline-flex样式不完全符合有序列表

Question

我有由<ol>和<li>个面包屑项目组成的面包屑组件。 组件应样式化为块元素，但内容应内联。

某些面包屑项目在内部使用flexbox布局，因此我将这些项目设置为display: inline-flex;。

当我将整个面包屑标记为复制粘贴并在文本编辑器中显示复制的文本时，我看到display: inline的项目是真正内联的，但是display: inline-flex用换行符包裹了。

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>