使元素向右浮动，但如果宽度不足，则溢出并滚动答案

【问题标题】：Make element float right, but overflow and scroll if there isn't enough width使元素向右浮动，但如果宽度不足，则溢出并滚动
【发布时间】：2019-04-29 05:34:00
【问题描述】：

我正在开发一个适用于任何屏幕尺寸的导航栏。对于大屏幕，使用float: left; 和float: right; 两个容器很容易。但是问题是当屏幕太小或内容太多时，容器会分成两行，看起来很糟糕。

这是我想要实现的目标（最后一个图）。绿色矩形表示屏幕区域（显示宽度）和我想要的不同宽度的元素行为。

这是我现在拥有的代码，在根容器上添加了resize: horizontal; 以便于测试。

* {
  font-family: sans-serif;
}

nav {
  width: 400px;
  overflow: scroll hidden;
  background-color: #EEE;
  border: 2px solid black;
  resize: horizontal;
}

.nav-left {
  float: left;
  display: flex;
}

.nav-right {
  float: right;
  display: flex;
}

.nav-item {
  display: inline-block;
  background-color: #00C;
  color: #FFF;
  padding: 1rem;
}

.nav-item:hover {
  background-color: #08F;
}

<nav>
  <div class="nav-left">
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
  </div>
  <div class="nav-right">
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
  </div>
</nav>

【问题讨论】：

标签： css scroll flexbox navbar

【解决方案1】：

考虑到您已经在为nav-left 和nav-right 元素使用flexbox，为什么不将nav 设为弹性框，而不是浮动。

请看下面的演示：

* {
  font-family: sans-serif;
}

nav {
  width: 400px;
  overflow: scroll hidden;
  background-color: #EEE;
  border: 2px solid black;
  resize: horizontal;
  display: flex; /* added */
  justify-content: space-between; /* spread them horizontally */
}

.nav-left {
  float: left;
  display: flex;
}

.nav-right {
  float: right;
  display: flex;
}

.nav-item {
  display: inline-block;
  background-color: #00C;
  color: #FFF;
  padding: 1rem;
}

.nav-item:hover {
  background-color: #08F;
}

<nav>
  <div class="nav-left">
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
  </div>
  <div class="nav-right">
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
  </div>
</nav>

【讨论】：