让滚动条在弹性项目上工作答案

【问题标题】：Getting scrollbars to work on a flex item让滚动条在弹性项目上工作
【发布时间】：2018-05-25 04:13:14
【问题描述】：

我有一个父 div 具有固定或计算的高度和宽度。旁边是固定宽度，内容很大。源代码如下。

父级（蓝色）可能位于其他容器中，因此大小不确定。
侧面（绿色）具有固定宽度。
内容容器（紫色）具有增长宽度，将填满剩余的宽度，而实际内容很少。
大内容（橙色）的内容非常大。

我的愿望是当内容变大时，滚动条应该出现在内容容器中（紫色）。但是当我将overflow: auto; 设置为父容器和容器时，出现了垂直滚动条，但父容器底部出现了水平滚动条。

一种解决方案是将固定宽度设置为紫色容器，例如width: calc(100vw - 100px)。但是我很困惑为什么即使我设置了溢出属性，紫色的宽度也比blue - green大。

.p {
  display: flex;
  background: blue;
  padding: 10px;
  overflow: auto;
  width: 400px;
  height: 300px;
}

.aside {
  background: green;
  flex: 0 0 100px;
  margin-right: 10px;
}

.content {
  /* width: calc(400px - 130px); */
  padding: 10px;
  background: purple;
  flex: 1 0 auto;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
}

.large {
  background: orange;
  width: 1000px;
  height: 800px;
}

<div class="p">
  <div class="aside">
    aside (fix width)
  </div>
  <div class="content">
    <div class="large">
      large content (need scrollbar)
    </div>
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

.p 的父级应该有overflow: hidden;，.content 应该有overflow: auto; 以便能够滚动进入想要的元素，这里是你可以玩的部分。

水平 .large {width: 2000px; height: 100%;} 你必须提供固定宽度

垂直 .large {height: 2000px; width: 100%;}你必须给固定高度

水平滚动

的第一种方法

.p {
  display: flex;
  background: blue;
  padding: 10px;
  overflow: hidden;
  width: 400px;
  height: 300px;
}

.aside {
  background: green;
  flex: 0 0 100px;
  margin-right: 10px;
}

.content {
  padding: 10px;
  flex-grow: 1;
  background: purple;
  overflow: auto;
}

.large {
  background: orange;
  height: 100%;
  width: 2000px;
}

<div class="p">
  <div class="aside">
    aside (fix width)
  </div>
  <div class="content"> 
    <div class="large">
      large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
       large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
       large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
      
    </div>
  </div>
</div>

垂直滚动

的第二种方法

.p {
  display: flex;
  background: blue;
  padding: 10px;
  overflow: hidden;
  width: 400px;
  height: 300px;
}

.aside {
  background: green;
  flex: 0 0 100px;
  margin-right: 10px;
}

.content {
  padding: 10px;
  flex-grow: 1;
  background: purple;
  overflow: auto;
}

.large {
  background: orange;
  height: auto;
  width: 100%;
}

<div class="p">
  <div class="aside">
    aside (fix width)
  </div>
  <div class="content"> 
    <div class="large">
      large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
       large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
       large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
      
    </div>
  </div>
</div>

【讨论】：

你可能误解了我的问题。 .large 内容是自动计算的，不应设置为实际宽度或高度。当我将overflow: hidden 设置为.p 时，缺少水平滚动条。

【解决方案2】：

这是你的代码：

.content {
  /* width: calc(400px - 130px); */
  padding: 10px;
  background: purple;
  flex: 1 0 auto;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
}

您已将flex-basis 设置为auto。我认为这就是杀死overflow 效应的原因。

The overflow property won't function without a fixed length。这就是启用width: calc(400px - 130px) 时它起作用的原因。但如果祖先有固定长度，它也可以工作。

尝试使用这个：

.content {
  padding: 10px;
  background: purple;
  overflow: auto;
}

revised codepen

.p {
  display: flex;
  background: blue;
  padding: 10px;
  overflow: auto;
  width: 400px;
  height: 300px;
}

.aside {
  background: green;
  flex: 0 0 100px;
  margin-right: 10px;
}

.content {
  /* width: calc(400px - 130px); */
  padding: 10px;
  background: purple;
  /* flex: 1 0 auto; */
  overflow: auto;
  /* overflow-x: auto; */
  /* overflow-y: auto; */
}

.large {
  background: orange;
  width: 1000px;
  height: 800px;
}

<div class="p">
  <div class="aside">
    aside (fix width)
  </div>
  <div class="content"> 
    <div class="large">
      large content (need scrollbar)
    </div>
  </div>
</div>

【讨论】：

但是这个解决方案留下了另一个问题。当.large内容没有大到填满所有剩余区域时，宽度小于calc(400px - 130px)
使用flex-grow: 1 或简写flex: 1 让这些元素消耗可用空间。 codepen.io/anon/pen/pVXxZv?editors=1100