Я не могу сделать прокрутку частью веб-сайта

Question

Я создаю сайт-клон etherscan.io для обучения программированию.
Но я не могу реализовать часть прокрутки области "Последние блоки" на этой странице .

Я прочитал исходные коды веб-сайта.
Но все свойства переполнения, относящиеся к детали, установлены "скрытыми", а не "прокруткой".
Я не могу понять эту часть.

Мои html и css коды следующие. Извините за слишком длинный код и слишком много атрибутов id. Пожалуйста, не обращайте внимания на наличие одинаковых атрибутов id. Я новичок ie в программировании.

Я добавляю ссылку CodePen ниже, чтобы вы могли легко понять мой код.
Не могли бы вы показать мне, как это сделать.
CodePen

HTML

<div id="blocks">
  <div id="blocks-container">
    <div id="blocks-title-container">
      <h2 class="fontfamily-1 font-color-5 font-size-1 font-weight-600">Latest Blocks</h2>
    </div>
    <div id="scroll">
      <div id="scroll-part">
        <div id="scroll-part-container">
          <div id="scroll-row-1">
            <div id="scroll-row-1-1">
              <div id="scroll-row-1-1-left">
                <div id="scroll-row-1-1-left-icon">
                  <span id="scroll-row-icon-block" class="font-size-1 font-weight-500">
                    <span id="scroll-row-icon-text" class="font-size-1 font-weight-500 fontfamily-1">Bk</span>
                  </span>
                </div>
                <div id="scroll-row-1-1-left-content">
                  <a id="scroll-row-1-1-left-content-number" class="fontfamily-1 font-size-1"
                    　href="/block/9873479">9873479</a>
                  <span id="countdown" class="font-color-4 fontfamily-1 font-weight-400 under-line-none">1 min 35 secs
                    ago</span>
                </div>
              </div>
            </div>
            <div id="scroll-row-1-1-right" class="fontfamily-1 font-size-1 font-weight-400">
              <div id="scroll-row-1-1-right-sub">
                <div id="scroll-row-1-1-right-center">
                  <span id="scroll-row-1-1-right-miner" class="fontfamily-1 font-size-1 font-weight-400">
                    Miner
                    <a id="scroll-row-1-1-right-name" class="fontfamily-1 font-size-1 font-weight-400 font-color-6"
                      href="/address">Spark Pool</a>
                  </span>
                  <a id="scroll-row-1-1-right-txns" class="fontfamily-1 font-size-1 font-weight-400 font-color-6"
                    title="Transactions in this Block" href="/txns">115
                    txns</a>
                  <span id="scroll-row-1-1-right-blockTime" class="fontfamily-1 font-weight-400">in 2 secs</span>
                </div>
                <div id="scroll-row-1-1-right-reward">
                  <span id="scroll-row-1-1-right-reward-content" class="fontfamily-1 font-weight-500 font-size-4"
                    title="Block Reward">
                    2
                    <b>.</b>
                    0439Eth
                  </span>
                </div>
              </div>
            </div>
          </div>
          <hr class="hr-space">

          <!-- repeating <div id="scroll-row-1"> 8 times -->

          <hr class="hr-space">
          <div id="scroll-row-1">
            <div id="scroll-row-1-1">
              <div id="scroll-row-1-1-left">
                <div id="scroll-row-1-1-left-icon">
                  <span id="scroll-row-icon-block" class="font-size-1 font-weight-500">
                    <span id="scroll-row-icon-text" class="font-size-1 font-weight-500 fontfamily-1">Bk</span>
                  </span>
                </div>
                <div id="scroll-row-1-1-left-content">
                  <a id="scroll-row-1-1-left-content-number" class="fontfamily-1 font-size-1"
                    　href="/block/9873479">9873479</a>
                  <span id="countdown" class="font-color-4 fontfamily-1 font-weight-400 under-line-none">1 min 35 secs
                    ago</span>
                </div>
              </div>
            </div>
            <div id="scroll-row-1-1-right" class="fontfamily-1 font-size-1 font-weight-400">
              <div id="scroll-row-1-1-right-sub">
                <div id="scroll-row-1-1-right-center">
                  <span id="scroll-row-1-1-right-miner" class="fontfamily-1 font-size-1 font-weight-400">
                    Miner
                    <a id="scroll-row-1-1-right-name" class="fontfamily-1 font-size-1 font-weight-400 font-color-6"
                      href="/address">Spark Pool</a>
                  </span>
                  <a id="scroll-row-1-1-right-txns" class="fontfamily-1 font-size-1 font-weight-400 font-color-6"
                    title="Transactions in this Block" href="/txns">115
                    txns</a>
                  <span id="scroll-row-1-1-right-blockTime" class="fontfamily-1 font-weight-400">in 2 secs</span>
                </div>
                <div id="scroll-row-1-1-right-reward">
                  <span id="scroll-row-1-1-right-reward-content" class="fontfamily-1 font-weight-500 font-size-4"
                    title="Block Reward">
                    2
                    <b>.</b>
                    0439Eth
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

CSS

#blocks {
    margin-bottom: 0!important;
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%;
    padding-left: 7.5px;
    padding-right: 7.5px;
    box-sizing: border-box;
    display: block;
}

#blocks-container {
    box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, .2);
    height: 100% !important;
    position: relative;
    display: flex!important;
    flex-direction: column;
    border: 1px solid #e7eaf3;
    border-radius: .25rem;
    box-sizing: border-box;
    justify-content: space-between !important;

}

#blocks-title-container {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
    align-items: center!important;
    justify-content: space-between!important;
    display: flex!important;
    padding: .75rem;
    margin-bottom: 0;
    background-color: #ffffff;
    border-bottom: 1px solid #e7eaf3;
    box-sizing: border-box;

}

#scroll {
    height: 400px;
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 1px;
    padding: .75rem;
    box-sizing: border-box;
    display: block;
    background-color: #ffffff;
}

#scroll-part {
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
    box-sizing: border-box;
    display: block;
}

#scroll-part-container {
    position: relative;
    top: 0px;
    left: 0px;
    overflow: scroll;
    width: auto;
    height: auto;
    box-sizing: border-box;
    direction: ltr;
    unicode-bidi: isolate;
}

#scroll-row-1 {
    display: flex;
    flex-wrap: wrap;
    margin-right: -7.5px;
    margin-left: -7.5px;
    box-sizing: border-box;
    direction: ltr;
}

#scroll-row-1-1 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    box-sizing: border-box;
    display: block;
    direction: ltr;
}

#scroll-row-1-1-left {
    margin-bottom: 0!important;
    margin-right: 1.25rem!important;
    align-items: center!important;
    display: flex!important;
    box-sizing: border-box;
    direction: ltr;
}

#scroll-row-1-1-left-icon {
    margin-right: .5rem!important;
    display: flex!important;
    box-sizing: border-box;
    direction: ltr;
}

#scroll-row-icon-block {
    cursor: default;
    position: relative;
    line-height: 0;
    width: 2.53906rem;
    height: 2.53906rem;
    padding: 0;
    color: #77838f;
    background-color: rgba(119, 131, 143, .1);
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .2s ease-in-out;
    box-sizing: border-box;
    direction: ltr;
}

#scroll-row-icon-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1e2022!important;
    box-sizing: border-box;
    cursor: default;
    line-height: 0;
    text-align: center;
    user-select: none;
    direction: ltr;

}

#scroll-row-1-1-left-content {
    flex: 1;
    box-sizing: border-box;
    display: block;
    direction: ltr;
    line-height: 1.5rem;
    text-align: left;
}

#scroll-row-1-1-left-content-number {
    text-decoration: none;
    color: #3498db;
    background-color: transparent;
    box-sizing: border-box;
    cursor: pointer;
    direction: ltr;
}

#countdown {
    white-space: nowrap;
    margin-left: 0!important;
    display: block!important;
    font-size: 80%;
    box-sizing: border-box;
    direction: ltr;
    line-height: 1.5;
    text-align: left;
}

#scroll-row-1-1-right {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    box-sizing: border-box;
    display: block;
    direction: ltr;
    line-height: 1.5;
    color: #1e2022;
    text-align: left;
}

#scroll-row-1-1-right-sub {
    justify-content: space-between!important;
    display: flex!important;
    box-sizing: border-box;

}

#scroll-row-1-1-right-content {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
    padding-left: 7.5px;
    padding-right: 7.5px;
    box-sizing: border-box;
    display: block;
    direction: ltr;
}

#scroll-row-1-1-right-container {
    justify-content: space-between!important;
    display: flex!important;
    box-sizing: border-box;
    direction: ltr;
}

#scroll-row-1-1-right-center {
    white-space: nowrap!important;
    box-sizing: border-box;
    display: block;
    direction: ltr;

}

#scroll-row-1-1-right-miner {
    margin-bottom: 0!important;
    display: block!important;
    box-sizing: border-box;
    white-space: nowrap;
    direction: ltr;
    line-height: 1.5;
    text-align: left;
}

#scroll-row-1-1-right-name {
    max-width: 132px;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    direction: ltr;
    line-height: 1.5;
    text-align: left;
}

#scroll-row-1-1-right-txns {
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap!important;
    direction: ltr;
    line-height: 1.5;
    text-align: left;
}

#scroll-row-1-1-right-blockTime {
    color: #77838f!important;
    font-size: 80%;
    box-sizing: border-box;
    white-space: nowrap!important;
    direction: ltr;
    line-height: 1.5;
    text-align: left;
}

#scroll-row-1-1-right-reward {
    display: block!important;
    box-sizing: border-box;
    direction: ltr;
}

#scroll-row-1-1-right-reward-content {
    position: relative;
    letter-spacing: .8px;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: #77838f;
    background-color: rgba(119, 131, 143, .1);
    line-height: 1.7;
    padding: .2rem .5rem;
    display: inline-block;
    transition: .2s ease-in-out;
    z-index: 3;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box;
    direction: ltr;

}

#scroll-row-1-1-right-reward-content::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    border-top: .7rem solid transparent;
    border-bottom: .7rem solid transparent;
    border-left: .7rem solid #ffffff;
    box-sizing: border-box;
}

.hr-space {
    margin-top: .75rem;
    margin-bottom: .75rem;
    opacity: .75;
    border: 0;
    border-top: 1px solid #e7eaf3;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    direction: ltr;
}

#transactions {
    display: block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.font-color-1 {
    color: #6e777f;
}

.font-color-2 {
    color: #f9fcff;
}

.font-color-3 {
    color: #000000;
}

.font-color-4 {
    color: #77838f;
}

.font-color-5 {
    color: #4a4f55;
}

.font-color-6 {
    color: #3498db;
}

a:hover {
    color: #3799db;
}

.font-size-1 {
    font-size: .8125rem;
}

.font-size-2 {
    font-size: 1.01563rem;
}

.font-size-3 {
    font-size: .71094rem;
}

.font-size-4 {
    font-size: .60938rem;
}

.fontfamily-1 {
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

.font-weight-300 {
    font-weight: 300;
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-600 {
    font-weight: 600;
}

.under-line-none {
    text-decoration: none;
}

.hover-no-change-summary:hover {
    color: #000000;
}