CODEWITHSUNDEEP
javascripthtmlcss
Paul
Paul

Reputation: 498

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.

Upvotes: 0

Views: 87

Answers (2)

Mukesh Kumar
Mukesh Kumar

Reputation: 65

You must use display feature here

.table {display:table;border-collapse:separate;border-spacing:5px;}
.table-row {display:table-row;}
.table-cell {display:table-cell;padding:5px;border:1px solid black;}
<div class="table">
 <div class="table-row">
  <div class="table-cell">123</div>
  <div class="table-cell">456<Br />sdf</div>
  <div class="table-cell">879</div>
 </div>
</div>

i am sure this will help you.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

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>

Upvotes: 1

Related Questions