Как сверстать такое на флексах

Question

Нужно что бы меню и языки прижимались к правому краю на больших экранах с этим все в порядке. А вот при уменьшении окна, блок с языками всегда своего размера, а меню обрезалось при переполнении. Такое впечатление что overflow вообще не работает.

.container {
  display: flex;
}

.header-logo {
  border: 1px solid red;
  width: 200px;
  height: 87px;
  display: flex;
  margin-right: 85px;
}

.header-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

.header-content-menu {
  display: flex;
  flex-basis: 100%;
  justify-content: flex-end;
}

.header-content-menu {
  padding-bottom: 7px;
}

nav {
  width: 100%;
}

nav ul {
  display: flex;
  justify-content: space-between;
  padding-left: 32px;
}

nav a {
  font-weight: 700;
  white-space: nowrap;
}

.header-content-language {
  margin-left: 20px;
  display: flex;
}

.header-content-language a {
  text-transform: uppercase;
  margin-left: 5px;
  font-size: 0.938em;
}

.current-language {
  font-weight: 700;
}

@media (max-width: 1000px) {
  nav {
    overflow: hidden;
  }
  nav ul {
    justify-content: flex-start;
    overflow: hidden;
  }
  nav ul li {
    margin-right: 10px;
  }
  nav ul::after {
    content: "...";
  }
}

<div class="container">
        <div class="header-logo">
        </div>
        <div class="header-content">
          <div class="header-content-menu">
            <nav>
              <ul>
                <li><a href="#">Линк1</a></li>
                <li><a href="#">Линк2</a></li>
                <li><a href="#">Линк3</a></li>
                <li><a href="#">Линк4</a></li>
                <li><a href="#">Линк5</a></li>
                <li><a href="#">Линк6</a></li>
              </ul>
            </nav>
            <div class="header-content-language">
              <a class="current-language" href="#">ru</a>
              <a href="#">ua</a>
            </div>
          </div>
        </div>
      </div>

Answer 1

Вот так:

Выносим div с языками в основной контейнер к логотипу и меню.
В flex ширина задается не через width:, а через flex: В нашем случае это фиксированные флексы для логотипа и языков и автоматически рассчитываемые размеры для меню (считаем через calc()).
Добавляем overflow на контейнер меню.
Убираем все margin с трех основных элементов (лого, меню, языки) и задаем отступы через justify-content на контейнере.
Причесываем внешний вид элементов. Отступы, list-style:none у меню и прочее.

Минусы:

Т.к. у нас тут только CSS нет возможности умно прятать пункты меню. Некоторые получаются обрезанными.

Чтобы это исправить нужно подключить JS, считать ширину меню, считать ширину каждого из пунктов, смотреть начиная с какого следует пункты спрятать. Затем сделать "точки" которые прикрепляются к after кнопкой, по клику на которую у нас выпадающим списком раскрываются "спрятанные" пункты меню.

на "флексах" такое не организовать.

Вот пример как это организовано в одном неплохом шаблоне для opencart: https://unishop2.tk/

Можете "вдохновиться" их JS кодом на этот элемент меню.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  border: 1px solid red;
  flex: 0 0 200px;
  height: 87px;
  display: flex;
}

.header-content {
  flex: 1 1 calc(100% - 250px);
  display: flex;
}

.header-content-menu {
  display: flex;
  flex-basis: 100%;
  justify-content: flex-end;
}

nav {
  width: 100%;
}

nav ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0px;
}

nav ul li {
  padding: 0px 15px;
}

nav a {
  font-weight: 700;
  white-space: nowrap;
}

.header-content-language {
  display: flex;
  flex: 0 0 50px;
}

.header-content-language a {
  text-transform: uppercase;
  margin-left: 5px;
  font-size: 0.938em;
}

.current-language {
  font-weight: 700;
}

@media (max-width: 1000px) {
  .header-content {
    overflow: hidden;
    position:relative;
  }
  .header-content:after {
    content: "...";
    position: absolute;
    right: 0px;
    top: 0;
    height: 50px;
    width: 20px;
    background: #fff;
    line-height: 50px;
    text-align: right;
  }
}

<div class="container">
  <div class="header-logo">
  </div>
  <div class="header-content">
    <div class="header-content-menu">
      <nav>
        <ul>
          <li><a href="#">Линк1</a></li>
          <li><a href="#">Линк2</a></li>
          <li><a href="#">Линк3</a></li>
          <li><a href="#">Линк4</a></li>
          <li><a href="#">Линк5</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="header-content-language">
    <a class="current-language" href="#">ru</a>
    <a href="#">ua</a>
  </div>
</div>

Answer 2

Вот так - при переполнении оно сворачивается под кнопку

function responseMenu() {
  $('ul.dropdown-menu li.item').appendTo('ul.menu');
  var items = $('ul.menu li.item');
  var max_width = $('ul.menu').width() - $('ul.menu li.dd_menu').outerWidth();
  var width = 0;
  var hide_from = 0;

  items.css({
    'width': 'auto'
  });

  items.each(function(index) {
    if (width + $(this).outerWidth() > max_width) {
      return false;
    } else {
      hide_from = index;
      width += $(this).outerWidth();
    }
  });
  if (hide_from < items.length - 1) {
    items.eq(hide_from).nextAll('li.item').appendTo('ul.dropdown-menu');
    items.css({
      'width': (max_width / (hide_from + 1)) + 'px'
    });
    $('ul.menu li.dd_menu').show();
  } else {
    $('ul.menu li.dd_menu').hide();
  }
}

$(document).ready(function() {
  $('.top_menu').on('click', '.dropdown-toggle', function() {
    $('.dropdown-menu').toggle();
  });

  $(window).on('resize', function() {
    responseMenu();
  }).trigger('resize');

});

ul.menu {
  padding: 0;
  margin: 0;
}

ul.menu li {
  list-style-type: none;
  display: block;
  float: left;
  padding: 5px 0;
  text-align: center;
  white-space: nowrap;
}

ul.menu li.dd_menu {
  float: right;
  position: relative;
  display: none;
}

ul.menu ul.dropdown-menu {
  display: none;
  position: absolute;
  top: 35px;
  right: 10px;
  padding: 5px;
  border: #CCC 1px solid;
  border-radius: 5px;
  z-index: 2;
}

ul.menu ul.dropdown-menu li {
  float: none;
}

ul.menu a {
  color: #0b4da2;
  display: inline-block;
  margin: 0 10px;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="top_menu">
  <ul class="menu">
    <li class="dd_menu">
      <button class="dropdown-toggle" type="button">+</button>
      <ul class="dropdown-menu"></ul>
    </li>
    <li class="item"><a href="#"><span>Menu item #1</span></a></li>
    <li class="item"><a href="#"><span>Menu item #2</span></a></li>
    <li class="item"><a href="#"><span>Menu item #3</span></a></li>
    <li class="item"><a href="#"><span>Menu item #4</span></a></li>
    <li class="item"><a href="#"><span>Menu item #5</span></a></li>
    <li class="item"><a href="#"><span>Menu item #6</span></a></li>
    <li class="item"><a href="#"><span>Menu item #7</span></a></li>
    <li class="item"><a href="#"><span>Menu item #8</span></a></li>
    <li class="item"><a href="#"><span>Menu item #9</span></a></li>
    <li class="item"><a href="#"><span>Menu item #10</span></a></li>
    <li class="item"><a href="#"><span>Menu item #11</span></a></li>
    <li class="item"><a href="#"><span>Menu item #12</span></a></li>
    <li class="item"><a href="#"><span>Menu item #13</span></a></li>
    <li class="item"><a href="#"><span>Menu item #14</span></a></li>
    <li class="item"><a href="#"><span>Menu item #15</span></a></li>
  </ul>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Как сверстать такое на флексах

Ответы (2 шт):

Вот так:

Минусы: