Question

我有一支笔，我集中精力。我有一个带有方形div的面板部分，有一个列方向，但由于某种原因，我无法使该面板部分可滚动以容纳内部高度的div。我尝试了overflow-y：auto，但它的行为并不像它应该的那样。现在，盒子缩小到位。

.panel-section {
      flex-basis: 18vw;
      background-color: #BFFD19;
      padding-top: 15px;
      padding-left: 15px;
      padding-right: 30px;

      min-height: 0px;
      display: flex;
      flex-direction: column;
      .thumbnail-holder {
        margin-bottom: 15px;
        background-color: #6036AD;
        width: 95%;
        height: 160px;
      }
    }
  }

https://codepen.io/anon/pen/OzKKgy

面板部分（右侧）和方框缩略图。我已经阅读了有关溢出的其他文章，但这些技术对我没有用。

Answer 1

要使.panel-section可滚动，请将overflow: auto添加到其规则中。

然后，由于弹性项的默认flex-shrink值为1，这意味着它设置为缩小以适合其父级，添加{{ 1}} flex-shrink: 0，他们将保持高度。

另外，一个修复，i.a。 Firefox需要在.thumbnail-holder上设置min-height: 0;，允许它小于其内容。

注意，为了避免视口上的垂直滚动条，并且更容易看到.top-section上的滚动条，我将.panel-section元素上的内联样式更改为modal-content（{ {1}}代替width:100%）。

Updated codepen

Stack snippet

＆＃13;

vw

＆＃13;

如何使用溢出的内容列来滚动flex项目

1 个答案: