1

Given a <div that is a percentage height of its parent and that contains a contenteditable as a child, let the child fill all available vertical space and overflow: scroll when no more vertical space is remaining.

codepen

Current behavior: overflow works as expected (scroll appears) with a maximum height set to a pixel int. However, with a percentage height, the contenteditable runs out of bounds.

enter image description here

edit: adding display: flex to container seems to help. I believe one must indeed use flexbox all the way down

edit: containerB may seem superfluous. It's there to simulate a deeply nested contenteditable

dras
  • 138
  • 4
  • 14

1 Answers1

1

You're on the right path, but I think you're overthinking it.

Get rid of the .containerB element, and set the flex property to .container instead, with the column direction.

.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>
mattatwork
  • 13
  • 2
  • Yeah sorry I wasn't clear on why that was there. I'm trying to simulate a situation in web app where the contentEditable is deeply nested. – dras May 15 '20 at 19:16