Позиция относительного родителя с абсолютным дочерним числом

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.