如何使 Div 的 100% 高度延伸到 HTML/CSS 中的滚动溢出？

Question

我在 HTML 中有一个 div，它有两个 child div，一个在右边，一个在左边。 child div 都设置了 contenteditable，因此当用户单击它们时，他们可以键入。但是，当文本低于 div 的大小时，parent div 会溢出并滚动，但 child div 不会。

这是一个例子：

#container {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    overflow: scroll;
    color: white;
    background: gray;
}
#part1 {
    width: 50%;
    margin: 0;
    background: blue;
    height: 100%;
    float: left;
    overflow: visible;
}
#part2 {
    width: 50%;
    margin: 0;
    background: green;
    height: 100%;
    float: right;
    overflow: visible;
}

<div id="container">
<div id="part1" contenteditable="true"></div>
<div id="part2" contenteditable="true"></div>
</div>

在上面的示例中，请尝试输入比垂直方向更多的文本（通过在框内连续输入 enter 键）。一旦文本越过框的一侧，parent 就会像预期的那样溢出，但是，children（正在输入）不会溢出，即使它们有 100%身高。

有没有办法让 children 与 parent 一起扩展，以便在 one/both 溢出时它们一起滚动？

Answer 1

您可以将内部 div 的 height 更改为 min-height，并使用额外的内部 div 和 display: flex，这样两个颜色 divs 具有相同的生长高度。 overflow: visible 没有必要。

工作示例：

#container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  overflow: scroll;
  color: white;
  background: gray;
}

#inner {
  display: flex;
  min-height: 200px;
}

#part1 {
  width: 50%;
  margin: 0;
  background: blue;
  min-height: 100%;
  float: left;
}

#part2 {
  width: 50%;
  margin: 0;
  background: green;
  min-height: 100%;
  float: right;
}

<div id="container">
  <div id="inner">
    <div id="part1" contenteditable="true"></div>
    <div id="part2" contenteditable="true"></div>
  </div>
</div>

因为你定义了一些 css 两次并且 overflow-x 不是必需的你可以添加一个 class 到彩色 divs 并将容器的溢出设置为 overflow-y.

工作示例：

#container {
  border: 1px solid black;
  width: 300px;
  height: 200px;
  color: white;
  background: gray;
  overflow-y: scroll;
}

#inner {
  display: flex;
  min-height: 200px;
}

.editable {
  width: 50%;
  margin: 0;
  min-height: 100%;
}

#part1 {
  background: blue;
  float: left;
}

#part2 {
  background: green;
  float: right;
}

<div id="container">
  <div id="inner">
    <div class="editable" id="part1" contenteditable="true"></div>
    <div class="editable" id="part2" contenteditable="true"></div>
  </div>
</div>

Answer 2

使用灵活性的规则对你的任务很有好处。为 #container 添加 display: flex 和 flex-flow: wrap。并从子项中删除 height: 100%，因为 flex-flow: wrap 本身会将元素拉伸到 full 高度。

此外，从子项中删除 float: left 和 overflow: visible。

#container {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    overflow: scroll;
    color: white;
    background: gray;
    display: flex;
    flex-flow: wrap;
}

#part1 {
    width: 50%;
    margin: 0;
    background: blue;
    /*height: 100%;
    float: left;
    overflow: visible;*/
}

#part2 {
    width: 50%;
    margin: 0;
    background: green;
    /*height: 100%;
    float: right;
    overflow: visible;*/
}

<div id="container">
    <div id="part1" contenteditable="true"></div>
    <div id="part2" contenteditable="true"></div>
</div>

如何使 Div 的 100% 高度延伸到 HTML/CSS 中的滚动溢出？

How To Make Div With 100% Height Extend into Scroll Overflow in HTML/CSS?

html

css

overflow