JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Панель</title>
</head>
<body>
    <div id="main">
        <div id="panel">
            <div class="sector">
                <div class="pattern" id="messages">
                    <div class="pattern-header">
                        Сообщения
                    </div>
                    <!-- этот контейнер не должен расширяться -->
                    <div class="pattern-content">
                        В своём стремлении улучшить пользовательский опыт мы упускаем, что активно развивающиеся страны третьего мира, вне зависимости от их уровня, должны быть рассмотрены исключительно в разрезе маркетинговых и финансовых предпосылок. С другой стороны, существующая теория требует определения и уточнения системы массового участия! Но выбранный нами инновационный путь, а также свежий взгляд на привычные вещи - безусловно открывает новые горизонты для экспериментов, поражающих по своей масштабности и грандиозности. Равным образом, убеждённость некоторых оппонентов создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса благоприятных перспектив. Следует отметить, что начало повседневной работы по формированию позиции позволяет оценить значение стандартных подходов. Вот вам яркий пример современных тенденций - высококачественный прототип будущего проекта говорит о возможностях анализа существующих паттернов поведения. Имеется спорная точка зрения, гласящая примерно следующее: многие известные личности и по сей день остаются уделом либералов, которые жаждут быть описаны максимально подробно.
                    </div>
                </div>
                <div class="pattern" id="log">
                    <div class="pattern-header">
                        Лог
                    </div>
                    <div class="pattern-content">
                        
     ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
        
        /* width */
        ::-webkit-scrollbar {
            width: 10px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: #f1f1f1; 
        }
        
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #888; 
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555; 
        }
        
        *{
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            font-family: 'Inter', sans-serif;
            font-weight: 300;
        }
        #main {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            flex-basis: max-content;
        }
        #header {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 75px;
        }
        #panel {
            display: flex;
            flex: 1;
        }
        .sector{
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .pattern{
            flex: 1;
            padding: 0 0 10px 10px;
            width: 100%;
            display: flex;
            flex-direction: column;
        }
        #logo {
            height: 50px;
        }

        .icon {
            height: 25px;
            margin: 0 5px 0 5px;
        }

        .pattern-header {
            padding: 0 10px 0 10px;
            margin-bottom: 5px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
     ...