max-height with flex: 1 and overflow

【问题标题】：max-height with flex: 1 and overflowmax-height with flex: 1 and overflow
【发布时间】：2020-05-16 03:17:27
【问题描述】：

给定一个<div，它是其父级的百分比高度，并且包含一个作为子级的 contenteditable，让子级填充所有可用的垂直空间并溢出：当没有更多垂直空间剩余时滚动。

codepen

当前行为：溢出按预期工作（出现滚动），最大高度设置为像素 int。但是，对于百分比高度，contenteditable 会超出范围。

编辑：将display: flex 添加到container 似乎有帮助。我相信确实必须use flexbox all the way down

编辑：containerB 可能看起来是多余的。它可以模拟深度嵌套的 contenteditable

【问题讨论】：

标签： css flexbox overflow

【解决方案1】：

你走在正确的道路上，但我认为你想多了。

去掉 .containerB 元素，并将 flex 属性设置为 .container，并使用列方向。

.container {
  border: 1px solid black;
  max-height: 60%;
  width: 500px;
  padding: 4px;
  overflow: none;
  display: flex;
  flex-direction: column;
}

.fill {
  border: 1px solid lightblue;
  flex: 1 1 auto;
  overflow: auto;
  min-height: 50px;
}

.outer {
  height: 400px;
  border: 1px dashed red;
}

<div class='outer'>
  <div class='container'>
    <div>hello</div>
    <div class='fill' contentEditable>edit</div>
  </div>
</div>

【讨论】：

是的，抱歉，我不清楚为什么会出现这种情况。我正在尝试在 web 应用程序中模拟 contentEditable 深度嵌套的情况。