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

【问题标题】：Horizontally scroll a list within flexbox a layout with set-width sidebar在具有设置宽度侧边栏的布局中水平滚动 flexbox 中的列表
【发布时间】：2018-11-24 14:53:10
【问题描述】：

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

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

我认为这是因为 flexbox 优先考虑主列中的空间，而不是强制滚动条。

在我的 Codepen 示例中，我使用 Bootstrap 的网格并使用移动优先的方法。将 min-width 断点设置为 1000px（CSS 的第 29 行附近）会导致侧边栏重新定位在主要内容下方，并允许选项卡水平滚动。不幸的是，我认为这对我不起作用，因为我的布局不会有固定数量的选项卡。

您可以在我的 codepen 中查看我的进度： 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;
  }
}

【问题讨论】：

标签： css layout flexbox horizontal-scrolling

【解决方案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 希望对您有所帮助。

编码愉快。

【讨论】：