如何修复 flexbox 可扩展菜单在火狐和铬中的错误？

Question

>我有带有导航菜单的可隐藏侧边栏。一切都使用弹性框，除了可扩展菜单(从上面第二个(之外，一切都很好。在Firefox中开始菜单裁剪，并在Chromium中与社交图标交叉？如何解决这个问题？我使用PostCSS的cssnext和cssfixes。

完整代码：https://codepen.io/arch2/pen/dNgKxq

<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" />
<div class="sidebar" id="sidebar">
  <nav class="navigation">
    <ul class="navigation__list">
      <li class="navigation_item"><a href="./index.html" title="ГЛАВНАЯ">ГЛАВНАЯ</a></li>
      <li class="navigation_item dropdown__toggle"><a href="./lyrics.html" title="ТЕКСТЫ">ТЕКСТЫ</a>
        <ul class="navigation__list dropdown">
          <li class="navigation_item"><a href="./lyrics.html#***" title="***">***</a></li>
          <li class="navigation_item"><a href="./lyrics.html#SagaORonine" title="SagaORonine">САГА О РОНИНЕ</a></li>
          <li class="navigation_item"><a href="./lyrics.html#malo" title="malo">МАЛО</a></li>
          <li class="navigation_item"><a href="./lyrics.html#kluvikiNot" title="kluvikiNot">КЛЮВИКИ НОТ</a></li>
          <li class="navigation_item"><a href="./lyrics.html#vKluvikah" title="vKluvikah">В КЛЮВИКАХ</a></li>
          <li class="navigation_item"><a href="./lyrics.html#krasnayaPesnya" title="krasnayaPesnya">КРАСНАЯ ПЕСНЯ</a></li>
          <li class="navigation_item"><a href="./lyrics.html#les" title="les">ЛЕС</a></li>
          <li class="navigation_item"><a href="./lyrics.html#chernoknizhnica" title="chernoknizhnica">ЧЕРНОКНИЖНИЦА</a></li>
          <li class="navigation_item"><a href="./lyrics.html#terem" title="terem">ТЕРЕМ</a></li>
          <li class="navigation_item"><a href="./lyrics.html#gerbarij" title="gerbarij">ГЕРБАРИЙ</a></li>
          <li class="navigation_item"><a href="./lyrics.html#vnutriGerbariya" title="vnutriGerbariya">ВНУТРИ ГЕРБАРИЯ</a></li>
          <li class="navigation_item"><a href="./lyrics.html#teploBezdonnoe" title="teploBezdonnoe">ТЕПЛО БЕЗДОННОЕ</a></li>
          <li class="navigation_item"><a href="./lyrics.html#malchikBatiskaf" title="malchikBatiskaf">МАЛЬЧИК-БАТИСКАФ</a></li>
          <li class="navigation_item"><a href="./lyrics.html#igrushki" title="igrushki">ИГРУШКИ</a></li>
        </ul>
      </li>
      <li class="navigation_item"><a href="./about.html" title="О ГРУППЕ">О ГРУППЕ</a></li>
    </ul>
  </nav>
  <address class="soc-link">
    <a class="soc-link__item" href="https://vk.com/caddysmelledliketrees" title="https://vk.com/caddysmelledliketrees">
      <i class="fa fa-vk" aria-hidden="true"></i>
    </a>
    <a class="soc-link__item" href="https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw" title="https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw">
      <i class="fa fa-youtube" aria-hidden="true"></i>
    </a>
    <a class="soc-link__item" href="https://instagram.com/caddysmellslike" title="https://instagram.com/caddysmellslike">
      <i class="fa fa-instagram" aria-hidden="true"></i>
    </a>
    <a class="soc-link__item" href="http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8" title="http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8">
      <i class="fa fa-lastfm" aria-hidden="true"></i>
    </a>
    <a class="soc-link__item" href="https://soundcloud.com/caddysmelledliketrees" title="https://soundcloud.com/caddysmelledliketrees">
      <i class="fa fa-soundcloud" aria-hidden="true"></i>
    </a>
    <a class="soc-link__item" href="https://caddysmelledliketrees.bandcamp.com" title="https://caddysmelledliketrees.bandcamp.com">
      <i class="fa fa-bandcamp" aria-hidden="true"></i>
    </a>
    <a class="soc-link__item" href="mailto:[e-mail]?subject=Общие%20вопросы"><i class="fa fa-envelope" aria-hidden="true"></i></a>
  </address>
</div>

Answer 1

.navigation和.soc-link不应该display: flex;您希望这两个是普通的块元素。这种弹性导致他们重叠，因为他们不尊重孩子的尺寸。