При переполнении контента блока прокручивать переполненный блок, а не всю страницу

Question

Есть страница, содержащая в себе контейнер из трех блоков. Первый блок состоит из трех частей, первая и третья части неизменны по содержимому. При расширении содержимого блоков контейнера появляется скролл всей страницы (рис.1). Необходимо сделать так чтобы страница всегда была без скролла, а у "располневших" блоков контейнера он появлялся (рис.2).

Пробовал решить проблему через overflow-y: hidden у всего контейнера и подгоном max-height по vh у контейнера и блоков. Но на экранах разной высоты данный подход работает некорректно. Есть какие-то идеи?

Answer 1

учстановить max-width для блока, который необходимо скролить и добавить overflow-y: auto

.wrapper {
    background-color: #eee;
    display: flex;
}

.block {
    flex: 1 1 20%;
    max-width: 300px;
    max-height: 200px;
    padding: 10px;
    background-color: #ddd;
    overflow-y: auto;
}

.content {
    flex: 1 1 80%;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
    <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi nostrum repellat soluta vitae? Assumenda commodi corporis distinctio explicabo iste libero odio provident recusandae, rerum saepe sapiente sunt vero? Aperiam distinctio dolorum ducimus eligendi eos esse fuga fugiat harum illum inventore ipsum iusto maxime minima natus non nostrum placeat praesentium quas quo quod quos recusandae saepe sequi similique tenetur, vitae voluptas voluptates. Ab alias aperiam corporis debitis distinctio dolores ducimus incidunt, libero natus nulla, officiis quibusdam quisquam quod quos ratione sequi sit soluta ullam voluptate, voluptates. Accusamus cupiditate eaque eveniet facere laborum minima perferendis quae rem! Est laboriosam magnam tenetur voluptas!</div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consequuntur delectus dignissimos, enim est incidunt libero nemo officiis optio perferendis placeat provident, quaerat quis repellendus sequi. Ab culpa et facilis fuga fugiat hic inventore, ipsa laudantium minus officiis perspiciatis, recusandae, saepe voluptate. A aliquam consectetur corporis cumque deleniti deserunt dignissimos dolorem, doloremque eligendi error est eum ex excepturi fugiat harum illum incidunt ipsam itaque iure iusto laudantium libero maxime molestiae possimus praesentium quae quaerat quas quasi quidem quis saepe ullam unde voluptas voluptate voluptatem voluptatibus voluptatum. Et expedita iure labore, laborum obcaecati omnis repellat velit? Esse et nam soluta! Cupiditate, enim, expedita! Autem cumque distinctio ea error excepturi fuga in laboriosam molestias nostrum porro, quaerat sit, ut voluptate voluptatem voluptatibus? A alias aliquid, amet asperiores aspernatur assumenda beatae corporis cumque, debitis delectus excepturi exercitationem facilis fuga fugiat harum magnam maiores modi molestiae molestias mollitia nihil nisi nobis officia perspiciatis porro praesentium quas quod reprehenderit repudiandae veniam vero vitae voluptas voluptates! Autem, corporis cum delectus dolor explicabo molestiae nisi obcaecati pariatur perferendis placeat recusandae, reiciendis saepe sequi velit veniam, vero voluptatum. Animi asperiores aspernatur atque autem distinctio, ducimus eaque in iste minus nam nisi non nostrum obcaecati odit perspiciatis placeat porro provident, repudiandae sint velit. Aperiam, asperiores beatae dignissimos dolor ea ex facere impedit ipsam magni minima natus, odit, officiis optio quae quis sapiente unde voluptatum. Architecto beatae corporis harum, ipsum modi recusandae sit. Animi aperiam fuga minima quaerat voluptas. Aspernatur autem debitis dignissimos eaque enim et illum iure laboriosam libero natus, nemo nisi non nulla, numquam quas quisquam repellendus soluta velit veniam voluptatum. Doloremque ea est illo molestiae mollitia nulla pariatur sit ullam. Accusamus animi aperiam assumenda atque cupiditate doloribus eius enim esse eveniet exercitationem facere facilis iusto labore modi molestiae nam nisi non nostrum, obcaecati quam qui quisquam quos repudiandae sapiente sed veritatis voluptas? Asperiores consectetur consequuntur dolor dolorem ducimus eum ex, inventore qui quibusdam ratione, repellat suscipit velit. Commodi deserunt in incidunt molestias voluptatum. Accusamus corporis dignissimos dolores exercitationem non perspiciatis quas tempora. A blanditiis delectus distinctio dolorum ducimus, eaque eum quod quos sit soluta! Aliquam consectetur eaque earum harum natus placeat rem tempore vitae, voluptas! Adipisci aperiam consequatur explicabo quibusdam, sequi similique soluta tenetur voluptates! Cupiditate ea incidunt iusto optio praesentium quibusdam, repudiandae? Quia, repudiandae veritatis? Corporis dolor est expedita illum laboriosam libero maxime, pariatur sequi tenetur voluptates. Cum debitis dolorum error ipsa numquam omnis reprehenderit suscipit. Aut ea enim, eos, fugit harum magnam minima modi mollitia natus nulla quia quod quos sequi tempora voluptatem. Atque commodi excepturi impedit, inventore, laborum molestias neque perferendis quam qui quia quo, sapiente vitae. Aliquam architecto beatae blanditiis, commodi distinctio itaque, magnam minima nemo nesciunt nihil nisi nobis officiis omnis perspiciatis quia repudiandae sequi tenetur veniam. Aliquid assumenda cum fugiat laboriosam magnam pariatur, veniam! Cumque debitis laboriosam laudantium, officiis quasi sed tenetur! Ad atque autem dolores doloribus earum excepturi laborum magni mollitia natus necessitatibus nesciunt non porro recusandae reiciendis similique, sint soluta temporibus, tenetur veritatis vero. Ab accusantium adipisci architecto at commodi dicta dolore et facilis incidunt nisi, rerum similique velit! Accusamus aliquam architecto consectetur cupiditate deserunt dignissimos doloremque doloribus enim ex ipsum magni modi molestias nemo optio perferendis quae, sed sit tenetur totam voluptatibus! A, accusantium aliquid aperiam assumenda blanditiis consequatur dolor dolore ea eos eveniet excepturi hic maiores minima nesciunt nulla numquam perspiciatis quia tempora tenetur, voluptas? Esse, nulla, possimus. Asperiores debitis earum eos, explicabo facere quia quo repellendus. Ab aliquam, aliquid amet aut, beatae dignissimos dolor error est fuga hic id incidunt iure laboriosam libero maxime minus molestias natus nisi officia porro quia quo reprehenderit soluta tenetur totam unde voluptatibus? Ab autem est eum, magnam minima obcaecati quis repellat vero voluptates! Ab animi blanditiis debitis, delectus deleniti doloribus esse eveniet expedita illo nihil, odio perspiciatis placeat possimus repellat, sequi tenetur ullam? A adipisci aliquid asperiores consequatur consequuntur dolor dolore dolorem dolores ducimus enim error, excepturi itaque laudantium molestiae nemo nesciunt, nisi nobis obcaecati odio placeat praesentium, quasi qui quisquam recusandae rerum sapiente soluta sunt ullam veritatis vero. Accusantium aut corporis deserunt eligendi iusto nulla obcaecati odio officiis quam sint. Doloremque et facere fugiat ipsa ipsum non qui quod sunt? Doloremque non soluta unde. Aliquid animi aspernatur autem, consectetur delectus, deleniti doloremque dolores dolorum eligendi esse facere ipsa magnam maiores odio quam veritatis vitae? Alias animi aperiam, asperiores consequuntur cupiditate debitis ea eligendi, error iusto laudantium molestiae non nulla quis recusandae repudiandae ullam unde ut? Aliquam corporis delectus dignissimos distinctio, explicabo ipsum laudantium nisi nobis omnis, repellat totam veniam. Atque consequatur consequuntur explicabo fuga fugiat fugit inventore ipsam iusto maxime minus molestias natus optio pariatur perspiciatis praesentium quidem quisquam ratione sapiente sit soluta tenetur ullam unde vel, velit voluptatibus. Accusantium consequatur culpa cumque dolorum fugiat itaque natus nisi nulla sint voluptates. Asperiores aspernatur consectetur cupiditate, distinctio, dolor dolorem facilis id impedit ipsam, iure labore molestiae neque nobis odio omnis quam quas repellat reprehenderit repudiandae rerum sequi similique temporibus tenetur totam ullam velit voluptatibus! Aspernatur assumenda deserunt ea, earum, esse exercitationem, neque numquam obcaecati quaerat qui reiciendis vitae voluptatem! Accusantium aliquid beatae deleniti deserunt, dignissimos dolore doloremque eligendi explicabo illo iusto maiores modi nam non quas quidem reiciendis repellat sapiente sint sit, suscipit ullam veniam vitae, voluptatem! Ad amet ea hic temporibus! Ad animi asperiores aspernatur, aut blanditiis commodi corporis dicta earum eveniet, ex exercitationem harum illo in itaque iure magnam maxime neque nesciunt, quae quam quis quisquam ratione recusandae repudiandae similique soluta suscipit velit veritatis voluptate voluptates. Accusamus aliquid, architecto cumque, dolor dolorum itaque laborum nesciunt omnis perspiciatis quam quis quo quos repellendus! Aliquam asperiores aut beatae corporis, cumque doloremque doloribus dolorum fugit id ipsam ipsum nemo neque nisi nobis nostrum numquam officiis optio provident quia quod repudiandae sapiente similique sunt vero vitae voluptas voluptate. Dolore dolores non velit! Accusamus aliquid amet architecto blanditiis commodi cum cumque debitis doloribus ducimus eos excepturi exercitationem maxime modi, natus, officia, pariatur placeat porro sit soluta suscipit tempora vel vitae! Beatae doloribus esse itaque magnam nisi, numquam odio, porro repudiandae suscipit tempora vitae?
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

БЛОГ НА HUSL

При переполнении контента блока прокручивать переполненный блок, а не всю страницу

Ответы (1 шт):