Ограничить вертикальный контент в div

Question

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

Первый способ, которым я попытался было поставить overflow-y: auto; как часть описания проекта DIV и это результат я получил:

Второй способ, которым я пытался решить это, поставив overflow-y: auto;, как часть всего наложения DIV и это результат я получил:

проблема со вторым способом, является то, что я хочу полосу прокрутки чтобы я мог появиться, но я не хочу, чтобы полоса прокрутки приводила к тому, что эта боковая панель информации не была доступна (или сразу же, это ниже всего текста, а не сбоку). Я думаю, что увеличение размера div может работать по ширине, но это может привести к тому, что он потеряет свое форматирование с помощью Skeleton (который я мог бы перестроить части, которые мне нужны для работы с этой функцией оверлея), но как новичок в веб-дизайне и я подумал, что я попрошу и посмотрю, есть ли какое-то очевидное решение, которого я просто пропустил.

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

Исходный код и такой:

• Я использую Skeleton, чтобы помочь построить свой сайт.
• Here - это html, который я использую.
• Here является частью css, которую я добавил.

Answer 1

Удалить заготовку <div> снизу .overlay-container:

<div class="container overlay-container"> 
    <h2 id="projectTitle"></h2> 
    <div class="two-thirds column project-description"></div> 
    <div class="one-third column"></div> 
</div>