сделать 2 навигации по центру, когда ширина ограничена, используя только flexbox

Question

У меня 2 nav с на одной линии. Один слева, другой справа.

Когда места недостаточно, я бы хотел сделать обе навигации по центру и взять всю ширину контейнера.

Взгляните на пример:

https://codepen.io/anon/pen/yxeoeK

HTML:

<div class="nav-mixed">
  <nav class="first">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </nav>
   <nav class="second">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </nav>
</div>

CSS:

body{
  background-color:yellow;
}
.nav-mixed{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
nav{
  background-color:grey;
  width:600px
}

Это легко с помощью запросов @media, но я бы хотел использовать flexbox только в качестве решения.

Что порекомендуете?

Answer 1

Попробуйте это

body{
      background-color:yellow;
    }
    .nav-mixed{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-around;
    }
    nav{
      background-color:grey;
      width:600px;
        flex:0 0 auto;
    }

<div class="nav-mixed">
  <nav class="first">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </nav>
   <nav class="second">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </nav>
</div>

Обновлен интервал между пробелами и добавлен флекс: 0 0 авто; на nav