как прокрутить позицию: абсолютная с прокруткой баузера?

Question

У меня есть три div-слоя. Первый слой - это фон с заданной высотой. второй слой является прозрачным div для content -class. В третьем слое находится контент. Я хочу удалить прокрутку класса .content, и я хочу прокрутить текст с помощью прокрутки браузера. Как мне это сделать?

.container{ 
 
    background-color:black; 
 
    height:400px; 
 
    wdith:100%; 
 
} 
 
.backtransparent{ 
 
    background-color: gray; 
 
    width:250px; 
 
    height:100%; 
 
    margin: 0 auto; 
 
} 
 
.content{ 
 
    width:200px; 
 
    margin: 0 auto; 
 
    background-color:white; 
 
    position:absolute; 
 
    overflow:auto; 
 
    height:400px; 
 
    left: 0; 
 
    right:0; 
 
}

<div class="container"> 
 
    <div class="backtransparent"> 
 
    <div class="content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odddio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur... 
 
    </div> 
 
    </div> 
 
</div>

Вот полный пример: https://jsfiddle.net/yrp4pmmc/2/

Answer 1

Вы имеете в виду что-то like this?

.container{ 
background-color: black; 
height: 400px; 
width: 100%; 
overflow: auto; 
} 
.content{ 
width: 240px; 
margin: 0 auto; 
background-color: white; 
left: 0; 
right: 0; 
border-left: 20px solid grey; 
border-right: 20px solid grey; 
} 

Answer 2

если я не понял ваш вопрос, все, что вам нужно сделать, это удалить абсолютное позиционирование и сделать родительскую div 100% высоты ,

Удаление указанной высоты в divs гарантирует, что они занимают размер содержимого, поскольку по умолчанию деблокируют. Затем, когда вы ограничиваете ширину элемента .content и удаляете его возможность прокрутки, контейнер должен принимать всю высоту своих дочерних элементов.

.container{ 
    background-color:black; 
    height: 100%; 
    width:100%; 
} 

.backtransparent{ 
    background-color: gray; 
    width:250px; 
    height:100%; 
    margin: 0 auto; 
} 

.content{ 
    width:200px; 
    margin: 0 auto; 
    background-color:white; 
    overflow:auto; 
    height: auto; 
} 

https://jsfiddle.net/Kyle_/yrp4pmmc/3/