CSS - how to set the height of a div when a nested div's height is set to fit-content?-CodePudding

Say there's a div called 'div1', and it has words in it. I set the height of div1 to 'fit-content', so no matter how few or how many words are inside of div1, div1 will always contain them.

Now, say this div1 is itself contained inside of another div that I'll call 'outerDiv'.

Then say there are two small boxes we'll call 'box1' and 'box2', and I want them both at the bottom corners of 'outerDiv'.

I want box1 and box2 to always stay underneath div1, no matter how long div1 gets. Therefore, the height of outerDiv should always be longer than the height of div1.

If, taking all the above, my code currently looks like this:

#outerDiv {
  position: relative;
  background: darkblue;
  height: 400px;
  width: 400px;
}

#box1 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  left: 0;
}

#box2 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  right: 0;
}

#div1 {
  position: absolute;
  background: white;
  height: fit-content;
  width: 250px;
  left: 75px;
  top: 100px;
}

<div id="outerDiv">
  <div id="box1">
  </div>
  <div id="box2">
  </div>
  <div id="div1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel fringilla est ullamcorper eget nulla. Pharetra vel turpis nunc eget lorem dolor. At consectetur lorem donec massa sapien. Massa
    tempor nec feugiat nisl pretium fusce id velit. Orci ac auctor augue mauris augue neque gravida. Molestie a iaculis at erat pellentesque. Nisl vel pretium lectus quam id leo in. Quisque non tellus orci ac auctor augue mauris augue neque. Vestibulum
    sed arcu non odio euismod.
  </div>
</div>

Then how can I set the height of outerDiv so that box1 and box2 are always underneath div1, no matter how long div1 becomes?

Thanks in advance!

CodePudding user response：

When parent div(#outerDiv) has the relative position and child(#div1) has an absolute position then parent div can not resize itself to the child's size. So I changed some attributes and commented unnecessary parts. Also, I added contenteditable="true" style="outline: none;" to div1 and now it is easy to change size of the text and see the result:

#outerDiv {
  position: relative;
  background: darkblue;
  /* height: 400px; */
  width: 400px;
  padding-top: 100px;
  padding-bottom: 106px; /*height of boxes   6px border top and bottom*/
}

#box1 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  left: 0;
}

#box2 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  right: 0;
}

#div1 {
  /* position: absolute; */
  margin: 0 auto;
  background: white;
  /* height: fit-content; */
  width: 250px;
  /* left: 75px;
  top: 100px; */
}

<div id="outerDiv">
  <div id="box1">
  </div>
  <div id="box2">
  </div>
  <div id="div1" contenteditable="true" style="outline: none;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel fringilla est ullamcorper eget nulla. Pharetra vel turpis nunc eget lorem dolor. At consectetur lorem donec massa sapien. Massa
    tempor nec feugiat nisl pretium fusce id velit. Orci ac auctor augue mauris augue neque gravida. Molestie a iaculis at erat pellentesque. Nisl vel pretium lectus quam id leo in. Quisque non tellus orci ac auctor augue mauris augue neque. Vestibulum
    sed arcu non odio euismod.
  </div>
</div>