滚动大于块中的内容

  // accord items
  const $accordHeaders = document.querySelectorAll('.profile__accord-header');

  if ($accordHeaders) {
    $accordHeaders.forEach($el => {
      $el.addEventListener('click', () => {
        const $blockContent = document.querySelector(`div[data-accorditem="${$el.dataset.accorditem}"]`);

        if (!$el.classList.contains('profile__accord-header_hide')) {
          $blockContent.addEventListener('click', () => {
            $el.classList.remove('profile__accord-header_hide');
            $blockContent.classList.remove('profile__accord-content_active');
          }, {once: true});
        }
        if ($blockContent) {
          $el.classList.add('profile__accord-header_hide');
          $blockContent.classList.add('profile__accord-content_active');
        }
      })
    })
  }

@charset "UTF-8";
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
}

:root {
  --container-width: 91.8vw;
  --container-offset: 2.6vw;
  --Gilroy: "Gilroy", sans-serif;
  --black: #000;
  --white: #fff;
  --white2: rgba(255, 255, 255, 0.8);
  --white3: rgba(255, 255, 255, 0.37);
  --gray: #a5a5a5;
  --gray4: rgba(255, 255, 255, 0.05);
  --gray5: rgba(255, 255, 255, 0.6);
  --cod: #1b1b1b;
  --cod2: #181818;
  --picton: rgba(58, 134, 238, 0.05);
  --shark: #1d2126;
  --blue: #3a86ee;
  --green: #24c38e;
  --red: #eb5757;
  --red2: rgba(235, 87, 87, 0.06);
  --yellow: #ffc73c;
  --bard: #eb5757;
  --sun: rgba(255, 199, 60, 0.3);
  --purple: rgba(214, 87, 235, 0.3);
  --cfocus: #25272b;
  --chover: #1d2835;
  --cactive: #171c22;
  --f10: 0.694445vw;
  --f12: 0.63vw;
  --f14: 0.73vw;
  --f16: 0.84vw;
  --f18: 0.94vw;
  --f20: 1.05vw;
  --f22: 1.52778vw;
  --f28: 1.46vw;
  --f32: 2.22222vw;
  --f36: 2.5vw;
  --f42: 2.24vw;
  --transition-timing: cubic-bezier(0.61, 1, 0.88, 1);
}

.layout-page {
  position: relative;
  margin: 0;
  padding: 0;
  min-width: 320px;
  min-height: 100%;
  font-family: var(--Gilroy);
  font-weight: 400;
  background-color: #181818;
  overflow-x: hidden;
}

.layout {
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.btn-reset {
  padding: 0;
  border: none;
  outline: 0;
  background-color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
}

.profile__content {
  display: flex;
  gap: 1vw;
  height: 30.3vw;
}
.profile__content-block {
  display: flex;
  flex-direction: column;
  padding: 1.57vw;
  border-radius: 1vw;
  background-color: var(--picton);
}
.profile__content-right {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1vw;
}
.profile__content-title {
  margin: 0;
  margin-bottom: 1.5vw;
  font-weight: 500;
  font-size: var(--f16);
  line-height: 100%;
  color: var(--white);
}
.profile__nots {
  width: 59vw;
  height: 100%;
}
.profile__nots-title {
  display: flex;
  align-items: center;
  gap: 1vw;
  margin: 0;
  margin-bottom: 1vw;
  max-width: 100%;
  font-weight: 500;
  font-size: var(--f18);
  line-height: 100%;
  color: var(--white);
}
.profile__nots-title-icon {
  width: 1.3vw;
  height: 1.3vw;
  fill: none;
}
.profile__nots-title-icon-fill {
  fill: var(--yellow);
}
.profile__accord {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1vw;
  width: 100%;
  overflow-y: auto;
}
.profile__accord-item {
  border: 0.1vw solid var(--white);
  border-radius: 0.7vw;
  width: 100%;
  cursor: pointer;
}
.profile__accord-block {
  width: 100%;
}
.profile__accord-header {
  display: flex;
  align-items: center;
  padding: 1vw;
  border-radius: 0.7vw;
  width: 100%;
}
.profile__accord-header_hide {
  padding: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
}
.profile__accord-header-arrow {
  width: 1vw;
  height: 1vw;
  fill: none;
}
.profile__accord-header-arrow-fill {
  fill: var(--white);
}
.profile__accord-date {
  margin-right: 1vw;
  font-weight: 400;
  font-size: var(--f14);
  line-height: 100%;
  color: var(--white2);
}
.profile__accord-title {
  margin-right: auto;
  font-weight: 400;
  font-size: var(--f16);
  line-height: 100%;
  color: var(--yellow);
}
.profile__accord-content {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  height:0;/*Добавляем*/
  display:none;/*Добавляем*/
}
.profile__accord-content_active {
  visibility: visible;
  opacity: 1;
  max-height: 9vw;
  height:100%;/*Добавляем*/
  display:block;/*Добавляем*/
}
.profile__accord-body {
  display: flex;
  flex-direction: column;
  padding: 1vw;
  height: 100%;
  overflow-y: auto;
}
.profile__accord-text {
  margin: 0;
  max-width: 80%;
  font-weight: 400;
  font-size: var(--f14);
  line-height: 100%;
  color: var(--white);
}
.profile__accord-text-top {
  display: block;
  margin-bottom: 1vw;
}

<body class="layout-page">
  <div class="layout">
    <div class="profile__content">  
      <div class="profile__content-block profile__nots">
        <h2 class="profile__nots-title">
                    <svg class="profile__nots-title-icon" viewBox="0 0 20 24" xmlns="http://www.w3.org/2000/svg">
                      <path class="profile__nots-title-icon-fill" d="M19.3483 16.3321C19.2641 16.2306 19.1813 16.129 19.1 16.031C17.9828 14.6797 17.3069 13.8642 17.3069 10.0388C17.3069 8.05836 16.8332 6.43336 15.8993 5.21461C15.2107 4.31426 14.2799 3.63125 13.053 3.12648C13.0372 3.1177 13.0231 3.10618 13.0114 3.09246C12.5701 1.61473 11.3625 0.625 10.0005 0.625C8.63858 0.625 7.43151 1.61473 6.99022 3.09094C6.97847 3.10417 6.96456 3.11533 6.94909 3.12395C4.08605 4.30258 2.69464 6.56387 2.69464 10.0373C2.69464 13.8642 2.01976 14.6797 0.901553 16.0295C0.820303 16.1275 0.73753 16.227 0.653233 16.3306C0.435483 16.5932 0.297521 16.9127 0.255674 17.2513C0.213826 17.5898 0.269845 17.9333 0.4171 18.241C0.730421 18.9012 1.39819 19.311 2.16042 19.311H17.8462C18.6049 19.311 19.2681 18.9017 19.5825 18.2446C19.7303 17.9368 19.7869 17.593 19.7454 17.2541C19.7039 16.9151 19.5661 16.5952 19.3483 16.3321ZM10.0005 23.375C10.7343 23.3744 11.4543 23.1752 12.0841 22.7986C12.7138 22.4219 13.2299 21.8818 13.5776 21.2356C13.5939 21.2046 13.602 21.1699 13.6011 21.1349C13.6001 21.0999 13.59 21.0657 13.5719 21.0357C13.5539 21.0057 13.5283 20.9809 13.4978 20.9637C13.4673 20.9465 13.4328 20.9375 13.3978 20.9375H6.60429C6.56921 20.9374 6.5347 20.9463 6.50412 20.9635C6.47353 20.9807 6.44792 21.0055 6.42976 21.0355C6.41161 21.0655 6.40154 21.0997 6.40053 21.1348C6.39953 21.1699 6.40762 21.2046 6.42401 21.2356C6.77163 21.8817 7.28763 22.4218 7.91729 22.7984C8.54696 23.1751 9.26682 23.3743 10.0005 23.375Z"/>
                    </svg>
                    Уведомления и письма
                  </h2>

        <ul class="list-reset profile__accord">
          <li class="profile__accord-item">
            <div class="profile__accord-block">
              <button class="btn-reset profile__accord-header fha-btn" data-accorditem="accorditem1">
                <span class="profile__accord-date">12.06.2022 12:20</span>
                <span class="profile__accord-title profile__accord-header-title_war">Предупреждение об оплате</span>
                <svg class="profile__accord-header-arrow" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg">
                            <path class="profile__accord-header-arrow-fill" d="M4.21069 3.9354L7.03569 1.1054C7.08256 1.05891 7.11976 1.00361 7.14514 0.942685C7.17052 0.881755 7.18359 0.816402 7.18359 0.750396C7.18359 0.68439 7.17052 0.619037 7.14514 0.558108C7.11976 0.497178 7.08256 0.441878 7.03569 0.395396C6.94201 0.302271 6.81529 0.25 6.68319 0.25C6.5511 0.25 6.42438 0.302271 6.33069 0.395396L3.83069 2.8704L1.3557 0.395396C1.26201 0.30227 1.13529 0.25 1.0032 0.25C0.871103 0.25 0.744377 0.30227 0.650696 0.395396C0.603452 0.441703 0.565866 0.496926 0.540118 0.557863C0.51437 0.618801 0.500971 0.684242 0.500696 0.750396C0.500971 0.816549 0.51437 0.881991 0.540118 0.942928C0.565866 1.00387 0.603452 1.05909 0.650696 1.1054L3.47569 3.9354C3.52252 3.98615 3.57934 4.02665 3.64259 4.05436C3.70584 4.08206 3.77414 4.09636 3.8432 4.09636C3.91225 4.09636 3.98055 4.08206 4.0438 4.05436C4.10705 4.02665 4.16387 3.98615 4.21069 3.9354Z" fill="white"/>
                          </svg>
              </button>

              <div class="profile__accord-content" data-accorditem="accorditem1">
                <div class="profile__accord-body">
                  <p class="profile__accord-text">
                    <span class="profile__accord-text-top">Добрый день, Алексей!</span>
                    Если вы не оплатите до 29 апреля 2024 года 17:00,
                    данные будут утеряны и мы будем вынуждены
                    перевести ваш тариф на “Базовый”
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li class="profile__accord-item">
            <div class="profile__accord-block">
              <button class="btn-reset profile__accord-header fha-btn" data-accorditem="accorditem2">
                <span class="profile__accord-date">12.06.2022 12:20</span>
                <span class="profile__accord-title profile__accord-header-title_war">Предупреждение об оплате</span>
                <svg class="profile__accord-header-arrow" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg">
                            <path class="profile__accord-header-arrow-fill" d="M4.21069 3.9354L7.03569 1.1054C7.08256 1.05891 7.11976 1.00361 7.14514 0.942685C7.17052 0.881755 7.18359 0.816402 7.18359 0.750396C7.18359 0.68439 7.17052 0.619037 7.14514 0.558108C7.11976 0.497178 7.08256 0.441878 7.03569 0.395396C6.94201 0.302271 6.81529 0.25 6.68319 0.25C6.5511 0.25 6.42438 0.302271 6.33069 0.395396L3.83069 2.8704L1.3557 0.395396C1.26201 0.30227 1.13529 0.25 1.0032 0.25C0.871103 0.25 0.744377 0.30227 0.650696 0.395396C0.603452 0.441703 0.565866 0.496926 0.540118 0.557863C0.51437 0.618801 0.500971 0.684242 0.500696 0.750396C0.500971 0.816549 0.51437 0.881991 0.540118 0.942928C0.565866 1.00387 0.603452 1.05909 0.650696 1.1054L3.47569 3.9354C3.52252 3.98615 3.57934 4.02665 3.64259 4.05436C3.70584 4.08206 3.77414 4.09636 3.8432 4.09636C3.91225 4.09636 3.98055 4.08206 4.0438 4.05436C4.10705 4.02665 4.16387 3.98615 4.21069 3.9354Z" fill="white"/>
                          </svg>
              </button>

              <div class="profile__accord-content" data-accorditem="accorditem2">
                <div class="profile__accord-body">
                  <p class="profile__accord-text">
                    <span class="profile__accord-text-top">Добрый день, Алексей!</span>
                    Если вы не оплатите до 29 апреля 2024 года 17:00,
                    данные будут утеряны и мы будем вынуждены
                    перевести ваш тариф на “Базовый”
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li class="profile__accord-item">
            <div class="profile__accord-block">
              <button class="btn-reset profile__accord-header fha-btn" data-accorditem="accorditem3">
                <span class="profile__accord-date">12.06.2022 12:20</span>
                <span class="profile__accord-title profile__accord-header-title_war">Предупреждение об оплате</span>
                <svg class="profile__accord-header-arrow" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg">
                            <path class="profile__accord-header-arrow-fill" d="M4.21069 3.9354L7.03569 1.1054C7.08256 1.05891 7.11976 1.00361 7.14514 0.942685C7.17052 0.881755 7.18359 0.816402 7.18359 0.750396C7.18359 0.68439 7.17052 0.619037 7.14514 0.558108C7.11976 0.497178 7.08256 0.441878 7.03569 0.395396C6.94201 0.302271 6.81529 0.25 6.68319 0.25C6.5511 0.25 6.42438 0.302271 6.33069 0.395396L3.83069 2.8704L1.3557 0.395396C1.26201 0.30227 1.13529 0.25 1.0032 0.25C0.871103 0.25 0.744377 0.30227 0.650696 0.395396C0.603452 0.441703 0.565866 0.496926 0.540118 0.557863C0.51437 0.618801 0.500971 0.684242 0.500696 0.750396C0.500971 0.816549 0.51437 0.881991 0.540118 0.942928C0.565866 1.00387 0.603452 1.05909 0.650696 1.1054L3.47569 3.9354C3.52252 3.98615 3.57934 4.02665 3.64259 4.05436C3.70584 4.08206 3.77414 4.09636 3.8432 4.09636C3.91225 4.09636 3.98055 4.08206 4.0438 4.05436C4.10705 4.02665 4.16387 3.98615 4.21069 3.9354Z" fill="white"/>
                </svg>
              </button>

              <div class="profile__accord-content" data-accorditem="accorditem3">
                <div class="profile__accord-body">
                  <p class="profile__accord-text">
                    <span class="profile__accord-text-top">Добрый день, Алексей!</span>
                    Если вы не оплатите до 29 апреля 2024 года 17:00,
                    данные будут утеряны и мы будем вынуждены
                    перевести ваш тариф на “Базовый”
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li class="profile__accord-item">
            <div class="profile__accord-block">
              <button class="btn-reset profile__accord-header fha-btn" data-accorditem="accorditem4">
                <span class="profile__accord-date">12.06.2022 12:20</span>
                <span class="profile__accord-title profile__accord-header-title_war">Предупреждение об оплате</span>
                <svg class="profile__accord-header-arrow" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg">
                            <path class="profile__accord-header-arrow-fill" d="M4.21069 3.9354L7.03569 1.1054C7.08256 1.05891 7.11976 1.00361 7.14514 0.942685C7.17052 0.881755 7.18359 0.816402 7.18359 0.750396C7.18359 0.68439 7.17052 0.619037 7.14514 0.558108C7.11976 0.497178 7.08256 0.441878 7.03569 0.395396C6.94201 0.302271 6.81529 0.25 6.68319 0.25C6.5511 0.25 6.42438 0.302271 6.33069 0.395396L3.83069 2.8704L1.3557 0.395396C1.26201 0.30227 1.13529 0.25 1.0032 0.25C0.871103 0.25 0.744377 0.30227 0.650696 0.395396C0.603452 0.441703 0.565866 0.496926 0.540118 0.557863C0.51437 0.618801 0.500971 0.684242 0.500696 0.750396C0.500971 0.816549 0.51437 0.881991 0.540118 0.942928C0.565866 1.00387 0.603452 1.05909 0.650696 1.1054L3.47569 3.9354C3.52252 3.98615 3.57934 4.02665 3.64259 4.05436C3.70584 4.08206 3.77414 4.09636 3.8432 4.09636C3.91225 4.09636 3.98055 4.08206 4.0438 4.05436C4.10705 4.02665 4.16387 3.98615 4.21069 3.9354Z" fill="white"/>
                </svg>
              </button>

              <div class="profile__accord-content" data-accorditem="accorditem4">
                <div class="profile__accord-body">
                  <p class="profile__accord-text">
                    <span class="profile__accord-text-top">Добрый день, Алексей!</span>
                    Если вы не оплатите до 29 апреля 2024 года 17:00,
                    данные будут утеряны и мы будем вынуждены
                    перевести ваш тариф на “Базовый”
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li class="profile__accord-item">
            <div class="profile__accord-block">
              <button class="btn-reset profile__accord-header fha-btn" data-accorditem="accorditem5">
                <span class="profile__accord-date">12.06.2022 12:20</span>
                <span class="profile__accord-title profile__accord-header-title_war">Предупреждение об оплате</span>
                <svg class="profile__accord-header-arrow" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg">
                            <path class="profile__accord-header-arrow-fill" d="M4.21069 3.9354L7.03569 1.1054C7.08256 1.05891 7.11976 1.00361 7.14514 0.942685C7.17052 0.881755 7.18359 0.816402 7.18359 0.750396C7.18359 0.68439 7.17052 0.619037 7.14514 0.558108C7.11976 0.497178 7.08256 0.441878 7.03569 0.395396C6.94201 0.302271 6.81529 0.25 6.68319 0.25C6.5511 0.25 6.42438 0.302271 6.33069 0.395396L3.83069 2.8704L1.3557 0.395396C1.26201 0.30227 1.13529 0.25 1.0032 0.25C0.871103 0.25 0.744377 0.30227 0.650696 0.395396C0.603452 0.441703 0.565866 0.496926 0.540118 0.557863C0.51437 0.618801 0.500971 0.684242 0.500696 0.750396C0.500971 0.816549 0.51437 0.881991 0.540118 0.942928C0.565866 1.00387 0.603452 1.05909 0.650696 1.1054L3.47569 3.9354C3.52252 3.98615 3.57934 4.02665 3.64259 4.05436C3.70584 4.08206 3.77414 4.09636 3.8432 4.09636C3.91225 4.09636 3.98055 4.08206 4.0438 4.05436C4.10705 4.02665 4.16387 3.98615 4.21069 3.9354Z" fill="white"/>
                </svg>
              </button>

              <div class="profile__accord-content" data-accorditem="accorditem5">
                <div class="profile__accord-body">
                  <p class="profile__accord-text">
                    <span class="profile__accord-text-top">Добрый день, Алексей!</span>
                    Если вы не оплатите до 29 апреля 2024 года 17:00,
                    данные будут утеряны и мы будем вынуждены
                    перевести ваш тариф на “Базовый”
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li class="profile__accord-item">
            <div class="profile__accord-block">
              <button class="btn-reset profile__accord-header fha-btn" data-accorditem="accorditem6">
                <span class="profile__accord-date">12.06.2022 12:20</span>
                <span class="profile__accord-title profile__accord-header-title_war">Предупреждение об оплате</span>
                <svg class="profile__accord-header-arrow" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg">
                            <path class="profile__accord-header-arrow-fill" d="M4.21069 3.9354L7.03569 1.1054C7.08256 1.05891 7.11976 1.00361 7.14514 0.942685C7.17052 0.881755 7.18359 0.816402 7.18359 0.750396C7.18359 0.68439 7.17052 0.619037 7.14514 0.558108C7.11976 0.497178 7.08256 0.441878 7.03569 0.395396C6.94201 0.302271 6.81529 0.25 6.68319 0.25C6.5511 0.25 6.42438 0.302271 6.33069 0.395396L3.83069 2.8704L1.3557 0.395396C1.26201 0.30227 1.13529 0.25 1.0032 0.25C0.871103 0.25 0.744377 0.30227 0.650696 0.395396C0.603452 0.441703 0.565866 0.496926 0.540118 0.557863C0.51437 0.618801 0.500971 0.684242 0.500696 0.750396C0.500971 0.816549 0.51437 0.881991 0.540118 0.942928C0.565866 1.00387 0.603452 1.05909 0.650696 1.1054L3.47569 3.9354C3.52252 3.98615 3.57934 4.02665 3.64259 4.05436C3.70584 4.08206 3.77414 4.09636 3.8432 4.09636C3.91225 4.09636 3.98055 4.08206 4.0438 4.05436C4.10705 4.02665 4.16387 3.98615 4.21069 3.9354Z" fill="white"/>
                </svg>
              </button>

              <div class="profile__accord-content" data-accorditem="accorditem6">
                <div class="profile__accord-body">
                  <p class="profile__accord-text">
                    <span class="profile__accord-text-top">Добрый день, Алексей!</span>
                    Если вы не оплатите до 29 апреля 2024 года 17:00,
                    данные будут утеряны и мы будем вынуждены
                    перевести ваш тариф на “Базовый”
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div
</body>