Position absolute does not activate overflow: auto

Navigation
2

How can I make absolute

div (id 3) override other divs and do not enable overflow div parent (id 2)? 

<div id="1" style="background: red; width: 400px">
    <div id="2" style="position: relative; background: blue; padding: 2px; width: 150px; height: 150px; overflow-y: auto;">
        <div id="3" style="position: absolute; top: 10px; right: 0; background: #eef; padding: 2px; width: 100px; height: 300px"></div>
    </div>
</div>
    
asked by anonymous 13.01.2018 / 17:49

1 answer

1

When you set overflow to div , it restricts everything in it to your area, which is what overflow is for. Even putting elements with position absolute will be confined to the div area. So it does not make sense to put a div higher without wanting it to respect the overflow rule.

The solution is to take div 3 of div 2 and position right using calc by subtracting the width of div 1 by the total width of div 2 ( width + padding ), and also setting the div 1 with position relative : 

<div id="1" style="background: red; width: 400px; position: relative;">
    <div id="2" style="position: relative; background: blue; padding: 2px; width: 150px; height: 150px; overflow-y: auto;">
    </div>
     <div id="3" style="position: absolute; top: 10px; right: calc(100% - 154px); background: #eef; padding: 2px; width: 100px; height: 300px"></div>
</div>
    
13.01.2018 / 21:27
Explanation about PHP code How to use the merge statement in sql server