Область прокрутки

<div class="scroll-area" tabindex="0" role="region" aria-label="Журнал дежурства">
  <div class="scroll-area__content">
    <p>09:00 — смена принята, открытых инцидентов нет.</p>
    <p>09:40 — задержка ответа выросла до 340 мс, причина: перегрев одного из узлов.</p>
    <p>10:05 — трафик перенаправлен на соседний узел, задержка 220 мс.</p>
    <p>11:30 — узел возвращён в работу после проверки.</p>
    <p>12:10 — плановая проверка резервных копий, ошибок нет.</p>
    <p>13:45 — выкатка версии 2.14 на 10% серверов.</p>
    <p>14:20 — выкатка завершена, графики в норме.</p>
    <p>15:00 — ретроспектива релиза, 148 участников.</p>
    <p>16:30 — смена передана, открытых инцидентов нет.</p>
  </div>
</div>

<div class="scroll-area scroll-area--x scroll-area--surface" tabindex="0" role="region" aria-label="Ближайшие встречи">
  <div class="scroll-area__content">
    <div class="card"><b>13/10 15:00</b><span>Ретроспектива релиза</span></div>
    <div class="card"><b>14/10 11:00</b><span>Планирование дежурств</span></div>
    <div class="card"><b>15/10 10:00</b><span>Разбор инцидента</span></div>
    <div class="card"><b>16/10 16:00</b><span>Обзор метрик</span></div>
    <div class="card"><b>17/10 12:00</b><span>Приёмка релиза</span></div>
  </div>
</div>