Попытаюсь объяснить по лучше, чего я хочу для начала на словах.
У нас есть блок, допустим он height: 150px
, внутри него может быть (ну точнее будут) еще несколько блоков неизвестной высоты и блок, который должен занять оставшееся пространство и иметь прокрутку.
Скорее всего код будет более нагляднее, с чем я сталкиваюсь:
body { margin: 15px; }
.block
{
height: 150px;
width: 500px;
padding: 5px;
border: 1px solid #000;
}
.block div:not(:last-child)
{
margin-bottom: 10px;
}
.block-overflow
{
border: 1px solid #DC4242;
overflow-y: auto;
height: 100%;
}
<div class="block">
<div>Test</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sint, blanditiis corrupti perferendis nobis tempora
</div>
<div class="block-overflow">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, dolores! Ratione facilis nam sint delectus laudantium. Delectus itaque esse quaerat voluptatibus provident reiciendis mollitia enim, tenetur vitae inventore aliquam exercitationem ut ratione dignissimos. Molestias saepe eum vitae quisquam iste excepturi cum et ipsa incidunt. Eum facere dolorum aspernatur perferendis voluptates, unde alias officiis quas illo blanditiis. In, repudiandae beatae. Deleniti nihil eos delectus soluta unde consequatur maiores mollitia expedita accusantium aperiam nam quas omnis id optio a error vitae iusto natus consequuntur, quos voluptate modi. Magni expedita natus suscipit non veritatis amet, quo accusantium tenetur odio eveniet blanditiis officia corrupti!
</div>
<div>
Помогите побороть проблему, которая давно меня мучала.
Спасибо за уделенное время.