Нужно что бы меню и языки прижимались к правому краю на больших экранах с этим все в порядке. А вот при уменьшении окна, блок с языками всегда своего размера, а меню обрезалось при переполнении. Такое впечатление что 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>