Question

我有几个水平放置的元素，但是它们比父母高，告诉他们滚动。看起来像这样

虽然滚动行为正确，但第一个块的内容溢出。

HTML看起来像这样

<section>
    <div> <!-- very long content --> </div>
    <div>b</div>
    ....
</section>

CSS：

section {
    display: flex;
    border: 2px solid red;
    height: 100px;
    align-items: stretch;
    overflow:auto;
}

div {
    background-color: green;
    margin: 5px;
    flex: 1;
}

DEMO

正如您在演示中所看到的，具有绿色背景颜色的元素不够高，无法容纳所有内容。怎么能实现这一目标？如果所有 div 具有相同的高度会很好，那可能吗？

Answer 1

使用height:auto;风格而不是固定的高度见fiddle

section {
    display: flex;
    border: 2px solid red;
    height: auto;
    align-items: stretch;
    overflow:auto;
}
div {
    background-color: green;
    margin: 5px;
    flex: 1;
}

或者你可以像updated fiddle

中那样避免高度风格

Answer 2

要使所有人具有相同的高度，请在section和div项之间添加一个包装器，并将其作为flex容器。

Updated fiddle

Stack snippet

section {
  border: 2px solid red;
  height: 100px;
  overflow: auto;
}

section > div {
  display: flex;
}

section > div > div {
  flex: 1;
  margin: 5px;
  background-color: green;
}

<section>
  <div>
    <div>a ge g er g er gerge rgera ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er
      gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgergg</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
  </div>
</section>

对于仅溢出的元素来保持溢出部分的背景颜色，为每个项目添加一个额外的内部包装，并让它继承背景颜色。

Updated fiddle

Stack snippet

section {
  display: flex;
  border: 2px solid red;
  height: 100px;
  overflow: auto;
}

section > div {
  flex: 1;
  margin: 5px;
  background-color: green;
}

section > div > div {
  background-color: inherit;
}

<section>
  <div>
    <div>a ge g er g er gerge rgera ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er
      gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgerga ge g er g er gerge rgergg</div>
  </div>
  <div>
    <div>b</div>
  </div>
  <div>
    <div>c</div>
  </div>
  <div>
    <div>d</div>
  </div>
  <div>
    <div>e</div>
  </div>
  <div>
    <div>f</div>
  </div>
</section>

Answer 3

如果您希望所有项目都是100px高而没有溢出，请设置overflow: hidden;。如果您希望所有项目都与最高项目一样高，请删除height属性。

高度问题与使用flexbox和滚动连续的元素

3 个答案: