如何在 flexbox 项目溢出时安排水平滚动条？

Question

我正在尝试安排一个布局，其中我有一个右侧栏，在主要内容区域的左侧，我有一个水平排列的固定宽度的项目列表。

这些有多种数量，当它们超出允许的空间时，我希望出现一个水平滚动条。

碰巧，这个列表中的每个项目还包含一个标题和一个可能垂直溢出的子项目列表。这也需要一个滚动条。

以下 jsbin 显示了我正在尝试的内容，但在水平排列时失败了。不幸的是，在滚动条出现之前，侧边栏会被压扁到很小的宽度。此外，很明显，当我的主标题开始滚动时，整个视口都会获得水平滚动条。

https://jsbin.com/qametad/edit?html,css,output

我怎样才能得到它，所以带有“s”类的区域（参见 jsbin）是水平滚动的区域？ （它不一定是“s”，我最初尝试让“ic”滚动但失败了，所以添加了“s”来尝试将弯曲和滚动分开）。

body {
  fullbleed height: 100vh;
}
.h {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 30px;
}
.m {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 50px);
  border: 1px solid green;
}
.ic {
  display: flex;
  flex: 1;
}
.s {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: 100%;
  overflow-x: auto;
}
.i {
  display: flex;
  flex-direction: column;
  width: 150px;
  border: 1px solid rebeccapurple;
  margin: 1px
}
.ih {
  height: 50px;
  self-align: center;
  border: 1px solid orange;
}
.il {
  margin: 1px;
  border: 1px solid black;
  overflow-y: auto;
}
.li {
  height: 60px;
  margin: 3px;
  border: 1px solid lawngreen;
}
.sb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 2px;
  border: 1px solid blue;
}

<header class="h">My Heading</header>
<section class="m">
  <div class="ic">
    <div class="s">
      <div class="i">
        <header class="ih">Item Header</header>
        <section class="il">
          <div class="li">A</div>
          <div class="li">B</div>
          <div class="li">C</div>
        </section>
      </div>
      <div class="i">
        <header class="ih">Item Header</header>
        <section class="il">
          <div class="li">A</div>
          <div class="li">B</div>
          <div class="li">C</div>
          <div class="li">C</div>
          <div class="li">C</div>
          <div class="li">C</div>
          <div class="li">C</div>
          <div class="li">C</div>
          <div class="li">C</div>
        </section>
      </div>
      <div class="i">
        <header class="ih">Item Header</header>
        <section class="il">
          <div class="li">A</div>
          <div class="li">B</div>
          <div class="li">C</div>
        </section>
      </div>
      <div class="i">
        <header class="ih">Item Header</header>
        <section class="il">
          <div class="li">A</div>
          <div class="li">B</div>
          <div class="li">C</div>
        </section>
      </div>
      <div class="i">
        <header class="ih">Item Header</header>
        <section class="il">
          <div class="li">A</div>
          <div class="li">B</div>
          <div class="li">C</div>
        </section>
      </div>
    </div>
  </div>
  <section class="sb">
    <div class="sbc">Some Content</div>
  </section </section>

Answer 1

弹性容器的初始设置是flex-shrink: 1 (source)。

因此，当容器变小时，您的 .i 元素（列）可以缩小。

要禁用收缩，请使用flex-shrink: 0。

.i {
  display: flex;
  flex-direction: column;
  width: 150px;
  border: 1px solid rebeccapurple;
  margin: 1px
  flex-shrink: 0; /* NEW */
}

现在水平滚动条可以在您的 .ic 容器上使用。

.ic {
  display: flex;
  flex: 1;
  overflow-x: auto;
}

revised demo

更多详情：What are the differences between flex-basis and width?

Answer 2

这应该对你有帮助。请在全屏模式下检查输出

检查以下sn-p

.maincontainer{
  display:flex;
  border:1px solid green;
  overflow:auto;
}

.sub-item-1{
  display:flex;
  border:1px solid red;
flex:none;
  width:100%;
  margin:20px;
}

.sub-item-2{
  margin:20px;
  border:1px solid  red;
  flex:1;
  padding:90px;
}
.content{
  border:1px solid gray;
  margin:10px;
  
}
.content-item{
  border:1px solid pink;
  margin:20px;
  height:20px;
  width:20px;
  text-align:center;
  padding:50px;
}

<header class="h">My Heading</header>
<div class="maincontainer">
  <section class=sub-item-1>
         <div class="content">
        <header class="content-header">Item Header</header>
      
          <div class="content-item">A</div>
          <div class="content-item">B</div>
          <div class="content-item">C</div>
        
      </div>
      <div class="content">
        <header class="content-header">Item Header</header>

          <div class="content-item">A</div>
          <div class="content-item">B</div>
          <div class="content-item">C</div>
          <div class="content-item">C</div>
          <div class="content-item">C</div>
          <div class="content-item">C</div>
          <div class="content-item">C</div>
          <div class="content-item">C</div>
          <div class="content-item">C</div>
      </div>
      <div class="content">
        <header class="content-header">Item Header</header>

          <div class="content-item">A</div>
          <div class="content-item">B</div>
          <div class="content-item">C</div>
       
      </div>
      <div class="content">
        <header class="content-header">Item Header</header>
   
          <div class="content-item">A</div>
          <div class="content-item">B</div>
          <div class="content-item">C</div>
     
      </div>
      <div class="content">
        <header class="content-header">Item Header</header>
     
          <div class="content-item">A</div>
          <div class="content-item">B</div>
          <div class="content-item">C</div>
   
      </div>
  </section>
  <section class="sub-item-2">
      <div class="sub-item-content">Some Content</div>
    </section
</div>

希望对你有帮助