问溢流-y最大高度不适用于div

EN

* {
  box-sizing: border-box;
}

/* max-height: 82%; replaced with line below */
height: 82%;

overflow: hidden;

* {
  box-sizing: border-box;
}

#root {
  width: 80%;
  height: 82%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
}

#header {
  width: 100%;
  margin: auto;
  height: 45px;
  text-align: center;
  background: var(--theme-color);
  color: var(--theme-txt-color);
  padding: 5px;
  border-radius: 30px 30px 0px 0px;
}

#main {
  overflow-y: auto;
  height: 100%;
  border-radius: 3px 3px 0px 0px;
  background-color: rgb(23, 23, 23, 0.6);
  padding: 10px;
  margin: auto;
  box-shadow: 0px 0px 23px 0px var(--theme-color);
}

<div id="root">
  <div id="header">
    <span id="header_text">header text</span>
  </div>
  <div id="main">
    <div id="fragment1" class="fragment">
      <h3 class="ch"><i class="fas fa-chart-line icon"></i> Döviz Takibi</h3>
      <input type="number" id="input_currency" min="0" placeholder="Döviz Miktarı (Döviz/TL)" autocomplete="off">

      <div id="div_currency" style="overflow: auto;white-space: nowrap;margin: auto;text-align: center;">
        <button id="btn_dollar"><i class="fas fa-dollar-sign"></i> Dolar</button>
        <button id="btn_euro"><i class="fas fa-euro-sign"></i> Euro</button>
        <button id="btn_pound"><i class="fas fa-pound-sign"></i> Sterlin</button>
      </div>
      <br>
      <h3 class="ch"><i class="fas fa-box-open"></i> Diğer</h3>
      <div id="div_other" style="overflow: auto;white-space: nowrap;margin: auto;text-align: center;">
        <button id="btn_weather"><i class="fas fa-temperature-high"></i> Tunceli Hava Durumu</button>
        <button id="btn_covid19"><i class="fas fa-virus"></i> Covid-19 Bilgi Paneli</button>
      </div>
      <br>
      <input type="number" id="input_timer" min="0" max="9999" placeholder="Zamanlayıcı Süresi (dk.)" autocomplete="off">
      <button style="width: 100%;" id="btn_timer"><i class="fas fa-stopwatch"></i> Zamanlayıcı</button>
    </div>

    <div id="fragment2" class="fragment">
      <h3 class="ch"><i class="fas fa-cog icon"></i> Ayarlar</h3>
      <b class="sh"><i style="color: var(--theme-color);" class="fas fa-fill-drip"></i> Tema Rengi</b>
      <br>
      <input id="input_theme_color" type="color">
      <br>
      <div id="history_scroll" class="scroll"></div>
      <div id="history">
        <button id="btn_show_history"><i style="float: left;" class="fas fa-chevron-right"></i>Geçmiş<i style="float: right;" class="fas fa-history"></i></button>
        <button id="btn_hide_history"><i style="float: left;transform: rotate(90deg);" class="fas fa-chevron-right"></i><span id="btn_hide_history_text">Geçmiş</span><i style="float: right;" class="fas fa-history"></i></button>
        <div id="history_content"></div>
        <button id="btn_clear_history">Geçmişi Temizle <i class="fas fa-trash-restore"></i></button>
      </div>

      <div id="details">
        <button id="btn_show_details"><i style="float: left;" class="fas fa-chevron-right"></i>Detaylar<i style="float: right;" class="fas fa-info-circle"></i></button>
        <button id="btn_hide_details"><i style="float: left;transform: rotate(90deg);" class="fas fa-chevron-right"></i>Detaylar<i style="float: right;" class="fas fa-info-circle"></i></button>
        <div id="details_content">
          <span id="settings_update_text"></span>
          <div class="border"></div>
          <span id="history_clear_text"></span>
          <br>
          <button id="btn_extension_page">Eklenti Sayfası <i class="fas fa-external-link-square-alt"></i></button>
        </div>
      </div>
      <div id="details_scroll" class="scroll"></div>
    </div>
  </div>
</div>