how to make parent div equal to the height of only one child and ignore the other child?-CodePudding

I have a div with two children, one of which I want to position outside the parent, and I want the parent to match the size of the other child. I can use height: auto to make it equal to the sum of the heights of the children, but what is the proper way to make the parent size to one of the children and ignore the other child's height?

<div style={width: auto; height: auto}>
  <child1 style={height: 24px; width 24px; position: absolute ...}/>
  <child2 style={height: 200px; width: 200px;}/>
<div>

CodePudding user response：

If you use position: absolute to remove the one child from its parent container it will also remove it from the DOM and the parent would then only be able to reference its height based on the child that still remains inside.

CodePudding user response：

It's hard to understand the exact intent of your question, but is this what you mean?

<div >
  <div ></div>
  <div ></div>
<div>

div.a {
  position: relative;
  border: 1px solid skyblue;
}
div.b {
  width: 100px;
  height: 100px;
  background: violet;
  border: 3px solid blue;
}
div.c {
  width: 200px;
  height: 200px;
  background: palegreen;
  border: 3px solid blue;
  position: absolute;
  top: 30px;
  left: 150px;
}

CodePudding user response：

I am not sure why an absolutely position is affecting the calculation of parent height. I thought it would be ignored.

Instead, I just added a margin-bottom: -24px to balance out the 2nd child for now. Will find the correct solution later or check back here. I also want to try making a quick fiddle to verify that in a fresh environment the absolutely positioned child is ignored. I wonder if another css property is interacting with it somehow.