переполнения скрыто с родительским DIV в абсолютном положении

Question

У меня есть очень конкретное требование, которое, родительский div является с absolute:position и ребенком div с absolute position и в родительском div меня overflow:hidden поэтому дополнительный width ребенка div получить скрытый, но это не работает, я знаю, что родительский div должен быть с position:relative, но в соответствии с текущей структурой моего кода я не могу изменить родителя divposition от absolute до relative, просто хотел узнать, есть ли способ справиться с этим ?

Вот пример JSfiddle, я хочу, чтобы светло-красный ящик был скрыт под родителем div, поэтому ребенок div будет находиться в пределах родительского.

Вот мой код

.wrapper { 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 100px; 
 
    width: 400px; 
 
    height: 350px; 
 
    background: #666666; 
 
    padding: 10px; 
 
} 
 
.wrapper-inner { 
 
    position: absolute; 
 
    width: 450px; 
 
    height: 380px; 
 
    background: #fecccc; 
 
}

<div class="wrapper"> 
 
    <div class="wrapper-inner"> 
 
    Content goes here 
 
    </div> 
 
</div>

Answer 1

Проверить этот код, согласно вашему требованию:

.wrapper { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 400px; 
    height: 350px; 
    background: #666666; 
    padding: 10px; 
    overflow: hidden; 
} 

Answer 2

Вы, кажется, пропустил добавить overflow:hidden в wrapper классе.

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; background:#666666; padding:10px; overflow:hidden;} 
 
.wrapper-inner{position:absolute; width:450px; height:380px; background:#fecccc;}

<div class="wrapper"> 
 
\t <div class="wrapper-inner"> 
 
    \t Content goes here 
 
    </div> 
 
</div>

Answer 3

Пожалуйста, проверьте мой fiddle

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; overflow:hidden; background:#666666; padding:10px;} 
 
.wrapper-inner{position:relative; width:100%; height:100%; background:#fecccc; overflow-y:scroll;}

<div class="wrapper"> 
 
\t <div class="wrapper-inner"> 
 
    \t Content goes here Content goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here 
 
    </div> 
 
</div>

Answer 4

Если меня не недопонимание ваше требование, вы не хотите, чтобы увидеть ребенка DIV расширение o с родительским div. Вы упомянули overflow:hidden, но этого на самом деле не существует в вашей скрипке. Добавление его в класс .wrapper действительно похоже на то, что я считаю вашим требованием.

Answer 5

DEMO

CSS

.wrapper-inner { 
    position: absolute; /* positioned wrt it parent */ 
    top:10px; /* account for 10px padding in parent */ 
    bottom:10px; 
    left:10px; 
    right:10px; 
    /* width: 450px; 
    height: 380px; */ 
    background: #fecccc; 
} 

Answer 6

Вы пропустили в overflow:hidden в родительской оболочки:

.wrapper { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 400px; 
    height: 350px; 
    background: #666666; 
    padding: 10px; 
    overflow: hidden 
} 

.wrapper-inner { 
    position: absolute; 
    width: 450px; 
    height: 380px; 
    background: #fecccc; 
} 

Короче говоря, вы ответили на свой вопрос! :)