绝对孩子的相对父亲的位置

Question

我会如何将孩子完全定位到父母的右侧（在子元素的所有侧都有空白）？为什么当孩子落在文档的正常流程之外时，孩子会导致父母（带有min-height）生成滚动条？我必须做些什么来摆脱那个滚动条？

或者，我怎么能在儿童的相对位置的上下文中使用calc（）函数，以便得到相同的结果？

* { 
 
    box-sizing: border-box; 
 
} 
 
.box { 
 
    width: 50%; 
 
    min-height: 400px; 
 
    margin: 50px auto; 
 
    background: hsl(220, 80%, 50%); 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 
.child { 
 
    width: 200px; 
 
    margin: 20px; 
 
    min-height: inherit; 
 
    background: firebrick; 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class="box"> 
 
    <div class="child"></div> 
 
</div>

Answer 1

孩子上min-height: inherit;继承是400px父值，margin: 20px;使超过100％的总高度，和你有overflow: auto;套，则意味着滚动条将出现如果容器不能容纳内容。

如果它们处于正常内容流中，滚动条将不会出现，因为它是min-height，容器将调整高度以适应内容。但是，在relative和absolute的位置，绝对盒取出正常流量，容器将无法自动调整高度以适应自己的身高，并且这会在孩子的身高超过时导致溢出。

要摆脱滚动条，你可以使用calc()函数，就像你提到的。你只需要在孩子上设置min-height: calc(100% - 40px);。或者，在母公司上将overflow的值更改为hidden，但输出会不同。

顺便说一句，既然你有box-sizing: border-box;宣布，但它不为margin做任何事情。