gocs · December 1, 2021 07:15 · gocs · Aug 22, 2021
diff --git a/fixed-header-and-scrollable-contents.html b/fixed-header-and-scrollable-contents.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <title>fixed header and scrollable contents</title>
    
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        main {
            overflow: auto;
            display: flex;
        }

        main>* {
            overflow-x: auto;
        }
    </style>
 </head>

 <body>
    <header>Header</header>
    <main>
        <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ab nulla veniam nisi labore. Animi cupiditate aliquam fugit a facilis autem ipsam at. A, labore odio. Sit architecto quia aspernatur excepturi magni esse obcaecati? Vitae tempore expedita similique recusandae qui deserunt, eum repellendus doloribus odio dolore dicta id. Impedit velit adipisci at, magnam voluptate quis perferendis dolores incidunt odit doloremque, nulla totam officiis delectus, fugiat dignissimos nobis harum sint est. Sit mollitia adipisci quaerat asperiores non nobis aperiam fugiat maiores possimus expedita earum porro quia, illum molestias laudantium repellendus quasi eligendi iste nemo doloremque a ut cumque repudiandae. Voluptas praesentium accusamus pariatur. Minima, sed nemo odit ea possimus expedita repudiandae sapiente ut voluptas eos eius molestias quibusdam, quia animi delectus repellendus sint, veniam illum voluptate ab eligendi beatae dolor. Dolorum, a maxime eum delectus facere impedit! Facilis laboriosam animi atque soluta quas possimus consequuntur mollitia eligendi veniam nihil iste inventore, iusto porro cum incidunt pariatur accusamus quia officia impedit quo hic tempora tenetur delectus? Ipsam laborum vero rerum molestiae vel praesentium tempora amet distinctio cum dolorum, facilis eligendi, optio suscipit quisquam nihil impedit possimus sit sapiente aut? Maiores nihil nemo necessitatibus ipsam optio rem hic, vitae autem provident, odit officiis aliquid neque quam aut mollitia velit, dicta molestias dolor doloribus quod. Id quaerat, a sed tempore mollitia sint. Quasi necessitatibus aperiam nesciunt voluptate doloremque voluptas, similique esse officia ut placeat, culpa, voluptates ex eveniet voluptatibus velit aspernatur illum voluptatem et laborum minus distinctio inventore earum. Quod, illum est deserunt ipsam iure nemo incidunt nostrum, nisi temporibus corporis eius corrupti maxime earum nesciunt! Totam ratione velit debitis esse placeat, dolor doloremque quas cum eius sapiente nesciunt pariatur accusantium iste similique optio corrupti nisi voluptas quaerat et cumque, in rerum nemo! Impedit architecto excepturi quos. Magni sed rem illum, doloremque repellat debitis accusamus voluptatem nulla eum, iste vitae ratione, quisquam architecto? Eaque non culpa nemo repudiandae et totam commodi, eius dolorum dolores facere molestiae possimus aliquam nostrum quasi, quo velit sint voluptatibus accusamus accusantium dignissimos provident! Perspiciatis, quibusdam libero soluta eveniet earum minima aliquam et ut excepturi porro commodi fugit maxime cupiditate rerum quod itaque quis non omnis numquam alias atque impedit. Quo iure unde, nulla dicta nihil laborum optio pariatur? Dolorum iusto error, quisquam quam natus nihil enim. Tenetur dignissimos corrupti, distinctio ducimus recusandae laboriosam deleniti nesciunt reprehenderit quod vitae voluptates? Iste doloremque eligendi tempore dolorum ipsam aliquid dolore quisquam iure ratione culpa nulla placeat distinctio deserunt voluptatum vero voluptate magnam sint, hic at rem? Non, cupiditate inventore. Voluptatem quia, quod tenetur atque quae laudantium consectetur. Quasi iure earum, nobis excepturi itaque doloribus ea quisquam. Voluptate consequatur animi, vitae praesentium accusamus eveniet! Vero odio quaerat temporibus deserunt, ea quas illum accusantium sit voluptate atque recusandae nam totam dolore nulla, nostrum laboriosam blanditiis officiis debitis alias reprehenderit accusamus? Quis dolor veritatis corporis voluptates. Provident, perferendis voluptates omnis voluptas eveniet optio ex numquam a esse suscipit distinctio facilis voluptate iusto aliquid. Perferendis iure nostrum totam, ad esse est dolorem voluptatem consequuntur, eligendi numquam consectetur at quidem cum quasi? Doloremque reiciendis earum, consectetur at optio obcaecati totam maiores numquam officia accusantium magni dolorem deleniti veritatis alias. Soluta ad, eaque, veniam facilis accusamus odio sed voluptas sapiente unde qui distinctio, veritatis totam. Fugiat ipsum consectetur quae error doloribus dicta eos autem illum harum ratione voluptate possimus nostrum nihil rem illo, eveniet quo perferendis ipsam facilis blanditiis in? Ducimus beatae eius amet sapiente nesciunt. Quasi necessitatibus ipsam soluta obcaecati vitae voluptatem ullam dolore iusto fugiat ipsum, consequatur sapiente dicta excepturi non debitis omnis blanditiis recusandae temporibus ex deserunt minus aliquid provident reiciendis? Maxime exercitationem expedita accusantium similique blanditiis! Quidem porro sit inventore numquam dolor rerum doloribus quisquam debitis sequi soluta commodi, amet vel facilis ab repellat maiores ea. Ad suscipit explicabo ea perspiciatis adipisci eum. Consequuntur ullam veritatis nulla exercitationem accusamus, animi porro. Asperiores dolor consectetur ullam sapiente eveniet ad qui a labore accusantium odio, placeat mollitia sunt at debitis quam atque voluptatibus fugit architecto obcaecati ratione? Omnis nemo sequi debitis reiciendis repellendus adipisci cum quisquam maiores repudiandae accusantium laudantium illum eum rerum harum tenetur esse a officiis facere placeat aliquam, cumque dicta quibusdam aliquid quaerat. Id nesciunt maxime velit consequatur placeat omnis veritatis numquam, quam, odio labore nostrum? Eos odit doloribus placeat vitae ipsum? Ipsa sunt necessitatibus vitae, eum unde autem? Nostrum, animi porro dolorum sapiente repellat vero. Recusandae voluptatibus ducimus impedit saepe quia nemo vero labore aperiam similique deserunt. Optio quos architecto delectus corrupti, dignissimos et. Exercitationem libero facilis distinctio ullam velit dignissimos quae, omnis labore ut nihil! Earum, quaerat. Veritatis blanditiis, culpa provident quod consectetur voluptates aspernatur, officia maxime obcaecati, necessitatibus atque magnam cum sapiente hic id illo. Error atque eos a dolor numquam eveniet omnis ab itaque, magni corporis dolores, molestias, temporibus ipsa vitae praesentium fugiat autem rem molestiae culpa necessitatibus quos. Dolorum assumenda, fuga accusamus facere eveniet asperiores qui, nam quam repudiandae consectetur sit est quaerat dolorem id deleniti excepturi quae corporis nisi magni nostrum pariatur repellendus. Eveniet numquam nisi itaque, illum iusto rerum debitis! Debitis suscipit nam ipsum optio perspiciatis culpa, neque beatae laudantium itaque architecto minima dolore quibusdam deleniti atque eos alias commodi cum voluptatum praesentium. Laborum tempore ipsum molestias odit totam consequuntur id perspiciatis. Quia, enim illum accusamus quidem, harum nostrum perspiciatis sint tenetur, cum quis nemo esse reiciendis excepturi? Blanditiis alias eum itaque eaque corrupti fugiat quis a corporis dolore iste commodi, perspiciatis dicta assumenda dolorem impedit deserunt maiores doloribus laudantium earum repellat! Ipsa laudantium aliquam quisquam, quos necessitatibus animi consequatur, veniam est soluta magni perspiciatis doloremque deserunt aperiam sunt! Nam eligendi ut similique praesentium voluptates, eveniet dolorem illo vitae maiores ullam animi, provident quae natus, fugiat expedita non corporis. Perferendis, nulla? Ut voluptas odio officia, ipsa voluptates alias quo maiores dolor possimus praesentium, quam ex officiis maxime sed commodi voluptatum ea eaque asperiores ipsam. Dolorum modi non provident itaque rem quos nulla autem! Consequatur maiores veniam neque, enim consectetur, sed, rerum exercitationem fugiat omnis repudiandae obcaecati. Aspernatur odio corporis itaque aperiam a perferendis fuga consequuntur vitae?</div>
        <div class="chat">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, qui quos? Itaque reprehenderit tempora cum assumenda nobis. Nisi explicabo voluptatem, velit asperiores ullam provident rem nemo alias ipsum quo natus magni suscipit, atque pariatur ex beatae voluptate quisquam ab commodi? Optio eveniet nobis saepe, explicabo aperiam accusantium similique quod? Error molestiae id ratione vero facilis temporibus deleniti minus ipsa illo inventore tenetur nihil vitae repudiandae itaque, modi qui vel quod autem adipisci maiores odit incidunt labore. Dicta soluta minima impedit fugit recusandae, ullam veniam distinctio suscipit officia? Odit officiis ipsa doloribus, fugiat voluptatum deserunt animi ratione quidem. Unde, excepturi non pariatur corrupti sapiente porro, blanditiis officiis dolor repellendus totam alias enim quia amet architecto expedita nisi fugiat debitis neque molestiae beatae laboriosam quod? Perspiciatis similique est sint optio temporibus! Excepturi animi laboriosam suscipit consequuntur repudiandae voluptas recusandae atque dolorum. Qui, incidunt debitis est cupiditate similique maxime ullam veritatis inventore placeat voluptate reprehenderit expedita quidem animi vel esse repudiandae pariatur aperiam eaque minus iure. Perspiciatis quo nisi ut omnis. Eum quis dolorem in tempora nisi culpa recusandae distinctio ratione adipisci, quod quisquam ipsam asperiores exercitationem deserunt, quam obcaecati dolores! Sunt earum ex aperiam, illo iusto, voluptas modi ducimus autem voluptatum vero accusamus reiciendis animi, atque dolorum nulla voluptate cumque quam cupiditate facilis? Fugit repellendus sint atque dolor illo eaque eum cum inventore unde officia voluptatem repudiandae, minima rem quis officiis error similique qui, provident molestiae, quo culpa. Veniam, provident? Recusandae eos consectetur ipsum nesciunt totam minus nemo aspernatur! Itaque aliquam necessitatibus ab, doloremque perferendis suscipit repudiandae explicabo modi quod eligendi laborum, facere quam harum maiores dicta aut exercitationem odit unde accusamus quisquam dolorem quibusdam! Ex fuga sapiente in fugiat ipsa natus voluptatem impedit possimus, quae officia iure nostrum! Voluptates est dolorem debitis ducimus? Cupiditate atque error possimus ab officiis quibusdam, illo nobis impedit fugiat reiciendis dolores exercitationem itaque alias voluptatibus? Eligendi ipsum illum saepe nobis vero rerum quasi quibusdam ab. At hic sit esse alias fuga eius magni. Minima corrupti voluptatibus, commodi, eius ducimus provident totam perspiciatis ratione voluptate dolore, quo iste dolores impedit iure ab id repellat nisi quasi officia quisquam ea odio. Sequi nisi accusantium a corrupti distinctio vero voluptatum veritatis dolores aut blanditiis facere quia error nemo inventore labore quibusdam recusandae nobis libero quos, eligendi aperiam repellat tempora! Modi reprehenderit voluptates eveniet iure obcaecati aspernatur, odit quos sequi ipsam voluptatum cupiditate numquam, a reiciendis? Aliquam pariatur ratione illo consequuntur, harum unde voluptatum rerum, adipisci eligendi numquam autem error voluptatibus nemo culpa velit porro. Quaerat veritatis adipisci ipsam non inventore doloremque blanditiis ad deleniti error provident dolores, delectus vero labore consequatur qui nam obcaecati, laudantium harum nisi beatae dolore sunt. Necessitatibus sint non id doloribus, facilis optio ratione possimus minima? Natus laborum, repellendus numquam maiores porro incidunt adipisci minus magnam officia corporis vero at est voluptatibus harum fugiat culpa, necessitatibus soluta. Dicta sapiente dolorum commodi provident quidem facere rerum sit assumenda eveniet sed laboriosam modi maiores harum illum praesentium placeat voluptates eligendi quas, quaerat pariatur, vel soluta saepe molestias at! Asperiores, beatae maxime. Dolore aut at error incidunt voluptates quod tempore nobis expedita cumque ipsa fugiat accusantium distinctio laborum rerum, dignissimos dolorem veritatis pariatur vel ducimus minus ipsam deleniti, soluta beatae ipsum. Reprehenderit error quasi culpa accusamus minus officiis pariatur, ipsum a consectetur veritatis ex maiores minima nihil architecto voluptate sequi dignissimos necessitatibus aut, autem incidunt deleniti odit natus expedita. Quam saepe deleniti sit laboriosam, possimus iusto perferendis ratione laudantium. Vero, explicabo. Repellendus quo, in pariatur numquam laborum accusamus molestiae distinctio beatae asperiores. Mollitia, quibusdam. Exercitationem non cum optio aperiam doloribus quidem, maxime mollitia numquam ducimus reiciendis nesciunt eius aliquid commodi eligendi totam aliquam dolores aspernatur, eos saepe ex similique? Dolorum sequi consequatur, aut architecto modi harum voluptates veritatis excepturi magni alias labore iste repudiandae animi ab totam amet perspiciatis, temporibus nesciunt eum saepe deleniti! Natus numquam atque dignissimos sit quae sed sunt in perspiciatis, excepturi vel eos neque consequatur facilis sint? Quaerat sint pariatur magni itaque tempora vitae quos possimus sed doloremque nemo nam fugiat eligendi, odit architecto perspiciatis libero, nesciunt facere corrupti! Facilis excepturi libero praesentium autem. Possimus debitis, esse deserunt quidem ad libero, doloremque, voluptatem voluptatibus similique tempore obcaecati? Totam nesciunt laborum rem maxime incidunt atque expedita beatae nulla obcaecati hic doloremque enim in recusandae molestias voluptatem id, non fuga est nam unde! Doloribus eos quo modi illo facere veritatis dolorem tempore atque fugiat. Accusamus eligendi fuga tempora iure, veritatis mollitia? Rem dolore nostrum soluta consequuntur sint aperiam id quod modi ipsum, ex quae? Enim necessitatibus totam inventore accusamus nostrum eligendi ut quidem expedita? Velit, vitae. Consequatur iusto, culpa in obcaecati totam iure alias est similique doloribus adipisci quasi. Cumque consequatur ab nesciunt, distinctio saepe est illum accusamus deleniti quo numquam suscipit nemo libero debitis. Neque perspiciatis sed facilis eum quis blanditiis assumenda impedit dicta id recusandae aspernatur ullam, soluta nesciunt corrupti ipsa consequatur modi quasi! Sed, maxime dignissimos voluptatibus eligendi accusantium impedit nobis excepturi nemo ipsam est id molestiae incidunt? Autem voluptatum commodi, ipsa atque, debitis repellat nobis obcaecati totam laborum harum distinctio! Pariatur deleniti molestiae harum optio unde numquam architecto provident fuga voluptatibus minus eum expedita dignissimos velit modi esse eius sit totam, rerum dolore mollitia exercitationem? Dolor, incidunt! Possimus quo tempore, sunt animi ex fugit delectus at quasi harum tenetur deserunt architecto explicabo cupiditate aut dolor repudiandae accusantium ab odio earum eius. Placeat, nihil? Fugiat, sed! Quisquam reiciendis at ex explicabo dolore minima consequuntur et ad ea fugit quis possimus molestias, voluptatem repellat distinctio beatae quae culpa sequi omnis similique perspiciatis reprehenderit eveniet fugiat! Exercitationem asperiores tempora architecto possimus numquam? Quia, aspernatur? Beatae deserunt odit voluptatibus ab similique dolore molestias ipsum iste magni sint unde, dolores illo voluptatem accusamus asperiores fuga recusandae animi dolor officia optio nostrum laboriosam rem cum. Cum placeat aperiam soluta perferendis harum autem dolore cupiditate distinctio! Voluptatibus beatae ratione eligendi unde sint iure sapiente corporis assumenda quibusdam, atque repellat blanditiis saepe deleniti inventore cumque? Unde asperiores rem molestias hic iusto, magni vel veniam quod reiciendis aliquid, eius amet sit.</div>
    </main>
 </body>

 </html>