Paul Paul - 5 months ago 10
Javascript Question

Make sibling height change depending on contenteditable(s) height

I have an example I cannot figure out,

I have a container(

outer
) that contains three children, what I want is the middle container(div) to be resized in height depending on how big the contenteditable are. They should all "fit" into the outer-div.

<div id="outer"> //container

<div id="contenthead" contenteditable="true">head</div>
<div id="content"> I am content </div> <!-- I should shrink or grow depending on the content editable -->

<div id="contentend" contenteditable="true">end</div>

</div>


I have tried using a
mutationobserver
, I have tried using
jquery ui
but even if they produce a solution they only work "so-so" sometimes not firing an event or loosing a pixel or two.

Anyone have any idea on how to do that?

I made an example: JSfiddle , it should explain it better of what I am after.

Answer

Flexbox can do that:

#outer {
  width: 200px;
  height: 300px;
  border-style: dotted;
  border-color: black;
  border-width: 1px;
  display: flex;
  flex-direction: column;
}
#contenthead,
#contentend {
  background: pink;
}
#content {
  width: inherit;
  flex: 1;
  min-height: 200px;
  display: inline-block;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}
<div id="outer">

  <div id="contenthead" contenteditable="true">head</div>

  <div id="content">I am content</div>

  <div id="contentend" contenteditable="true">end</div>

</div>