css - 在具有设置宽度侧边栏的布局中水平滚动 flexbox 中的列表

Question

我有一个两列布局，主要部分有一个选项卡式 UI，右侧有一个边栏。在较大的屏幕上，主栏的宽度是可变的，而侧边栏的宽度应该设置。在较小的屏幕上，侧边栏应重新定位在主要部分下方，主要部分和侧边栏部分都为 100% 宽。

我正在尝试构建选项卡式 UI，以便在主要部分的宽度不足以显示其所有选项卡时水平滚动。我遇到的问题是，当屏幕无法容纳所有选项卡时，侧边栏会被向右推离屏幕，这会触发整个页面的水平滚动，而且 不会在选项卡式 UI 上触发水平滚动条。

我假设发生这种情况是因为 flexbox 优先考虑主列中的空间并且不强制滚动条。

在我的 Codepen 示例中，我使用了 Bootstrap 的网格并使用了移动设备优先的方法。将最小宽度断点设置为 1000px(CSS 的第 29 行左右)会导致侧边栏重新定位到主要内容下方，并允许选项卡水平滚动。不幸的是，我认为这对我不起作用，因为我的布局不会有固定数量的选项卡。

您可以在我的代码笔中查看我的进度: https://codepen.io/scobban/pen/pVqeKR

我发现唯一与我的问题密切相关的其他帖子是 horizontally scrolling flex child ，但似乎对我没有帮助。

感谢您的帮助。

这是 HTML:

<div class="wrap">
  <header class="header">
    Header Nav Bar
  </header>
  <div class="l-flex">
    <div class="l-main">
      <h1>Main</h1>
      <ul class="nav nav-tabs">
        <li>
          <a class="tab">Pizzas</a></li>
        <li><a class="tab">Subs</a></li>
        <li class="active"><a class="tab">Salads</a></li>
        <li><a class="tab">Entress</a></li>
        <li><a class="tab">Daily Specials</a></li>
        <li><a class="tab">Side Dishes</a></li>
        <li><a class="tab">Toppings</a></li>
        <li><a class="tab">Dressings</a></li>
        <li><a class="tab">Utensils</a></li>
      </ul>
    </div>
    <div class="l-side l-side-right">
      <div class="l-side-section">
        <h2>Sidebar</h2>
      </div>
    </div>
  </div>
</div>

这是我的 scss:

$light: lightblue;
$shadow: rgba(0, 0, 0, 0.16);
$navheight: 51px;

.header {
  background-color: black;
  height: $navheight;
}

.l-flex {
  display: display;
}
.l-main {
  min-height: 100vh;
  padding: 0 2em;
  flex: 1;
}
.l-side {
  flex: 0 0 21em;
  background-color: $light;
  .l-side-section {
    padding: 1em 2em;
  }
  &.l-side-right {
    box-shadow: inset 6px 0px 6px -6px $shadow;
  }
}

@media (min-width: 1000px) {
  .l-flex {
    display: flex;
  }
}

.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  li {
    display: inline-block;
    float: none;
  }
}

Answer 1

我对您的 HTML 和 CSS 做了一些更改，它在没有移动优先方法的情况下工作正常-

$light: lightblue;
$shadow: rgba(0, 0, 0, 0.16);
$navheight: 51px;

.header {
  background-color: black;
  height: $navheight;
}

.l-flex {
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.l-main {
  min-height: 100vh;
  padding: 0 2em;
  min-width:calc(100% - 21em);
  max-width: 100%;    
}
.l-side {
  flex: 1;
  background-color: $light;
  .l-side-section {
    padding: 1em 2em;
  }
  &.l-side-right {
    box-shadow: inset 6px 0px 6px -6px $shadow;
  }
}



.nav-tabs {
  flex-wrap: nowrap; 
  white-space: nowrap;
  li {
    display: inline-block;
    float: none;
  }
}

.tabs-container{
  overflow-x: auto;
  overflow-y: hidden;
  min-width:calc(100% - 21em);
}

<div class="wrap">
  <header class="header">
    Header Nav Bar
  </header>
  <div class="l-flex">
    <div class="l-main">
      <h1>Main</h1>
      <div class="tabs-container">
      <ul class="nav nav-tabs">
        <li>
          <a class="tab">Pizzas</a></li>
        <li><a class="tab">Subs</a></li>
        <li class="active"><a class="tab">Salads</a>         </li>
        <li><a class="tab">Entress</a></li>
        <li><a class="tab">Daily Specials</a></li>
        <li><a class="tab">Side Dishes</a></li>
        <li><a class="tab">Toppings</a></li>
        <li><a class="tab">Dressings</a></li>
        <li><a class="tab">Utensils</a></li>
      </ul>
      </div>
    </div>
    <div class="l-side l-side-right">
      <div class="l-side-section">
        <h2>Sidebar</h2>
      </div>
    </div>
  </div>
</div>

链接- https://codepen.io/anon/pen/ZRXYyd 希望对您有所帮助。

快乐编码。