由于具有 min-height 和 min-width 的不同子级而使位置绝对子级适合父级的宽度和高度

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;

}

试图使兄弟2 div 适合整个 .parent div 。我试过溢出：覆盖；位置：相对；给.parent。还将 display: table 添加到 .parent 和 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>