将位置绝对为适合孩子的宽度和高度，以适应因最小高度和最小宽度不同而导致的父对象溢出

Question

https://codepen.io/petermirmo/pen/eQpWXN

html：

<div class="parent">
  <div class="sibling1">
  </div>
  <div class="sibling2">
  </div>
</div>

css：

.parent {
  background-color:red;
  display:inline-block;
  overflow:auto;
  position:relative;
  width:100%;
}
.sibling1{
  min-height: 4000px;
  min-width: 4000px; 
  width: 100%;
}
.sibling2{
  background-color:orange;

  position: absolute;

  top:0; 
  right:0;
  bottom:0;
  left:0;

}

试图使sibling2 div适合整个.parent div。我试过溢出：覆盖；职位：相对到.parent。还向.parent添加display：table和display：table-row;对孩子如果您有任何想法请告诉我！请看一下codepen，它将使情况更加清晰：）。

Answer 1

只需将父项设置为inline-block。默认情况下，它是一个块元素，因此它的宽度被限制为其父元素的宽度，并且您将发生溢出。使用inline-block将使其适合其内容。

.parent {
  background-color:red;
  position:relative;
  /*overflow:auto; useless as the overflow is now on an upper level*/
  display:inline-block;
}
.sibling1{
  min-height: 4000px;
  min-width: 4000px; 
}
.sibling2{
  background-color:orange;

  position: absolute;

  top:0; 
  right:0;
  bottom:0;
  left:0;
  /*useless
  width:100%;
  height: 100%;*/
}

<div class="parent">
  <div class="sibling1">
  </div>
  <div class="sibling2">
  </div>
</div>