启用 flexbox 的元素中的 overflow-x 不允许滚动

Question

我知道有一些问题与这个问题非常相似，甚至可能重复，但应用这些知识仍然无法使这个 100% 有效。有些答案解决了一部分，有些解决了另一部分，但我一直无法找到完整的解决方案。

我有一个使用 flexbox 设置排列的布局。我想要一个主工作区，右侧有一个控制面板，底部有一个停靠栏，可以水平滚动以显示动态数量的项目。我有 a mock up in a codepen:

我在这里列出了主要部分：

<div class="layout">
  
  <div class="workspace">
    <div class="animation-frame"></div>
    <div class="dock">
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
    </div>
  </div>
  <div class="controls">
  </div>
  
  </div>

这里的样式：

html,body{margin:0;padding:0;height:100vh;width:100vw;}

.box  {
  flex-basis: 100px;
  width:100px;
  height: 100px;
  min-width:100px;
  min-height: 100px;
  background: black;
  margin:5px;
}

.layout {
  display:flex;
  height: 100%;
  background:lightblue;
}

.workspace {
  background: lightgray;
  flex: 1;
  display: flex;
  flex-direction:column;
}

.animation-frame {
  background: cyan;
  flex:1;
}

.dock {
  background: green;
  height:120px;
  display:flex;
  overflow-y: hidden;
  overflow-x: scroll;
}

.controls {
  background: orangered;
  width:120px;
}

我运行遇到的问题是，当我尝试使用属性 overflow-x: scroll 设置“停靠”时，内容仍然会拉伸容器：

我知道如果我强制扩展坞上的宽度，我可以让溢出工作：

但后来我失去了 flexbox 给我的调整大小的灵活性。

有没有办法在允许水平滚动的同时获得动态水平尺寸？

Answer 1

如果您的控件具有 120 像素的宽度，这可能就是您要找的东西

html,body{margin:0;padding:0;height:100vh;width:100vw;}

.box  {
  flex-basis: 100px;
  width:100px;
  height: 100px;
  min-width:100px;
  min-height: 100px;
  background: black;
  margin:5px;
}

.layout {
  display:flex;
  height: 100%;
  background:lightblue;
}

.workspace {
  background: lightgray;
  flex: 1;
  display: flex;
  flex-direction:column;
}

.animation-frame {
  background: cyan;
  flex:1;
}

.dock {
  background: green;
  height:120px;
  display:flex;
  overflow-y: hidden;
  overflow-x: scroll;
  /* This line was the only change*/
  width: calc(100vw - 120px);
}

.controls {
  background: orangered;
  width:120px;
}

<div class="layout">
  
  <div class="workspace">
    <div class="animation-frame"></div>
    <div class="dock">
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
    </div>
  </div>
  <div class="controls">
  </div>
  
  </div>

启用 flexbox 的元素中的 overflow-x 不允许滚动

overflow-x in flexbox enabled element not allowing scroll

css

horizontal-scrolling

flexbox