位置粘性不适用于溢出的 flexbox

Position sticky not working on flexbox with overflow

我在 flexbox 中有两列。剩下一个，小的。它有自己的高度并且自己溢出。右边的有一个自动高度。当我滚动页面时，第二列向下滚动也向左移动。但我不想要这个。当我滚动整个页面时，左边的应该粘在导航栏和页脚之间。

我尝试了 position:sticky 和 top:0 但仍然无效。

这是我的截图：

ul {
  margin: 0;
  list-style: none;
}

li {
  margin: 0;
  list-style: none;
}

.glossary {
  display: flex;
}

.glossary-items {
  border-radius: inherit;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.glossary-items-str {
  align-self: stretch;
}

.glossary-letters {
  border-radius: inherit;
  text-align: right;
  background-color: white;
  line-height: 1.3 !important;
  display: flex;
  width: 50px;
}

.glossary-letters ul {
  width: 100%;
  margin-left: 0 !important;
}

.glossary-letters ul li {
  width: 100%;
}

.glossary-letters a {
  color: #2b2b2b;
  display: block;
}

.glossary-letters a:not(.glossary-titles-active):hover {
  color: #68b;
}

.glossary-titles {
  border-radius: inherit;
  position: relative;
  top: 0;
  position: sticky;
  background-color: white;
}

.glossary-titles ul::-webkit-scrollbar {
  width: 5px;
  height: 0.5em;
}

.glossary-titles ul::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

.glossary-titles ul::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 100px;
  border: 1px solid #d8d8d8;
  max-height: 50px;
}

.glossary-titles ul::-webkit-scrollbar-track {
  background: #d8d8d8;
  border-radius: 100px;
}

.glossary-titles-active {
  color: #137;
  font-weight: bold;
}

.glossary-titles-group {
  font-size: 1.5em;
  color: #137;
  font-weight: bold;
  position: sticky;
  background: white;
  top: 0 !important;
}

.glossary-titles a:not(.glossary-titles-active):hover {
  color: #68b;
}

.glossary-titles ul {
  overflow-y: auto;
  height: 430px;
}

.glossary-content {
  background-color: white;
  flex: 2;
}

.glossary-content dl {
  flex: 2;
}

.glossary-content h4 {
  margin-top: 2.9em !important;
}

.glossary-content-container-title {
  padding-right: 7px;
  white-space: nowrap;
  font-weight: 700;
  position: relative;
}

.glossary-content-container-title-dots {
  position: absolute;
  right: 0;
  margin-left: 5px;
  display: inline-block;
  font-weight: bold;
}

.glossary-content-container img {
  object-fit: contain;
  width: 150px;
}

.glossary-content ul {
  margin: 0;
}

.glossary-content a:hover {
  color: #68b;
}

.active,
.glossary-letters-link-A {
  background-color: #68b;
  color: white !important;
  border: solid;
  padding: 0 10px;
  border-radius: 0 10px 5px 0;
  transition: padding 0.11s ease;
}

<div class="glossary-items grid ">
  <div class="glossary-items-str">
    <div class="d-flex  border-shadow">

      <div class="glossary-titles">
        <ul>
          <div class="group-class">
            <div id="A">
              It should be position sticky when scroll page down
              <li class="glossary-titles-group pb-1 pt-1">A</li>
            </div>
            <li><a href="/tr/sozluk/Acik-Piyasa-Islemleri-API">Açık Piyasa İşlemleri (APİ)</a></li>
            <li><a href="/tr/sozluk/Agirlikli-Ortalama-Fonlama-Maliyeti">Ağırlıklı Ortalama Fonlama Maliyeti</a></li>
          </div>
          <div class="group-class">
            <div id="B">
              <li class="glossary-titles-group pb-1 pt-1">B</li>
            </div>
            <li><a href="/tr/sozluk/BIST-100-Endeksi">BİST-100 Endeksi</a></li>
            <li><a href="/tr/sozluk/Bina-Maliyet-Endeksi">Bina Maliyet Endeksi</a></li>
            <li><a href="/tr/sozluk/Bireysel-Kredi-Buyumesi">Bireysel Kredi Büyümesi</a></li>
            <li><a href="/tr/sozluk/Borc-Cevirme-Orani">Borç Çevirme Oranı</a></li>
          </div>
          <div class="group-class">
            <div id="C">
              <li class="glossary-titles-group pb-1 pt-1">C</li>
            </div>
            <li><a href="/tr/sozluk/CDS">CDS</a></li>
          </div>
          <div class="group-class">
            <div id="D">
              <li class="glossary-titles-group pb-1 pt-1">D</li>
            </div>
            <li><a href="/tr/sozluk/Dis-Ticaret-Beklenti-Anketi">Dış Ticaret Beklenti Anketi</a></li>
            <li><a href="/tr/sozluk/Dis-Ticaret-Endeksi">Dış Ticaret Endeksi</a></li>
            <li><a href="/tr/sozluk/Dis-Ticaret-Istatistikleri">Dış Ticaret İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Dogrudan-Yabanci-Sermaye-Yatirimi">Doğrudan Yabancı Sermaye Yatırımı</a></li>
            <li><a href="/tr/sozluk/Doviz-Kuru">Döviz Kuru</a></li>
          </div>
          <div class="group-class">
            <div id="E">
              <li class="glossary-titles-group pb-1 pt-1">E</li>
            </div>
            <li><a href="/tr/sozluk/Ekonomik-Guven-Endeksi">Ekonomik Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Emisyon">Emisyon</a></li>
          </div>
          <div class="group-class">
            <div id="F">
              <li class="glossary-titles-group pb-1 pt-1">F</li>
            </div>
            <li><a href="/tr/sozluk/Faiz-Disi-Denge">Faiz Dışı Denge</a></li>
            <li><a href="/tr/sozluk/Finansal-Hizmetler-Guven-Endeksi">Finansal Hizmetler Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Finansal-Kesim-Disi-Firmalarin-Net-Doviz-Pozisyonu" aria-current="page" class="glossary-titles-active">Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</a></li>
          </div>
          <div class="group-class">
            <div id="G">
              <li class="glossary-titles-group pb-1 pt-1">G</li>
            </div>
            <li><a href="/tr/sozluk/Gec-Likidite-Penceresi">Geç Likidite Penceresi</a></li>
            <li><a href="/tr/sozluk/Genc-Issizlik">Genç İşsizlik</a></li>
            <li><a href="/tr/sozluk/Getiri-Verim-Egrisi">Getiri Verim Eğrisi</a></li>
            <li><a href="/tr/sozluk/Gosterge-Faiz">Gösterge Faiz</a></li>
            <li><a href="/tr/sozluk/GSYH---Buyume">GSYH - Büyüme</a></li>
            <li><a href="/tr/sozluk/GSYH---Uretim-Yontemi">GSYH - Üretim Yöntemi</a></li>
          </div>
          <div class="group-class">
            <div id="H">
              <li class="glossary-titles-group pb-1 pt-1">H</li>
            </div>
            <li><a href="/tr/sozluk/Hayvan-Uretim-Istatistikleri">Hayvan Üretim İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Hazine-Nakit-Gerceklesmeleri">Hazine Nakit Gerçekleşmeleri</a></li>
            <li><a href="/tr/sozluk/Hizmet-Uretici-Fiyat-Endeksi">Hizmet Üretici Fiyat Endeksi</a></li>
          </div>
          <div class="group-class">
            <div id="I">
              <li class="glossary-titles-group pb-1 pt-1">I</li>
            </div>
            <li><a href="/tr/sozluk/Ihracat-Iklimi-Endeksi">İhracat İklimi Endeksi</a></li>
            <li><a href="/tr/sozluk/Insaat-Maliyet-Endeksi">İnşaat Maliyet Endeksi</a></li>
            <li><a href="/tr/sozluk/Isgucu-Gostergeleri">İşgücü Göstergeleri</a></li>
            <li><a href="/tr/sozluk/Issizlik">İşsizlik</a></li>
            <li><a href="/tr/sozluk/Istanbul-Ucretliler-Gecinme-Endeksi">İstanbul Ücretliler Geçinme Endeksi</a></li>
          </div>
          <div class="group-class">
            <div id="K">
              <li class="glossary-titles-group pb-1 pt-1">K</li>
            </div>
            <li><a href="/tr/sozluk/Kamu-Borclanmasi">Kamu Borçlanması</a></li>
            <li><a href="/tr/sozluk/Kapasite-Kullanim-Orani">Kapasite Kullanım Oranı</a></li>
            <li><a href="/tr/sozluk/Kisa-Vadeli-Dis-Borc-Istatistikleri">Kısa Vadeli Dış Borç İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Kisibasi-GSYH">Kişibaşı GSYH</a></li>
            <li><a href="/tr/sozluk/Konut-Fiyat-Endeksi">Konut Fiyat Endeksi</a></li>
            <li><a href="/tr/sozluk/Konut-Satislari">Konut Satışları</a></li>
            <li><a href="/tr/sozluk/Kredi/Mevduat-Orani">Kredi/Mevduat Oranı</a></li>
          </div>
          <div class="group-class">
            <div id="L">
              <li class="glossary-titles-group pb-1 pt-1">L</li>
            </div>
            <li><a href="/tr/sozluk/Lorenz-Egrisi-Gini-Katsayisi">Lorenz Eğrisi / Gini Katsayısı</a></li>
          </div>
          <div class="group-class">
            <div id="M">
              <li class="glossary-titles-group pb-1 pt-1">M</li>
            </div>
            <li><a href="/tr/sozluk/Menkul-Kiymet-Istatistikleri">Menkul Kıymet İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Merkez-Bankasi-Rezervleri">Merkez Bankası Rezervleri</a></li>
            <li><a href="/tr/sozluk/Merkezi-Yonetim-Butcesi">Merkezi Yönetim Bütçesi</a></li>
            <li><a href="/tr/sozluk/Motorlu-Kara-Tasitlari-Istatistikleri">Motorlu Kara Taşıtları İstatistikleri</a></li>
          </div>
          <div class="group-class">
            <div id="N">
              <li class="glossary-titles-group pb-1 pt-1">N</li>
            </div>
            <li><a href="/tr/sozluk/Net-Hata-Noksan">Net Hata Noksan</a></li>
          </div>
          <div class="group-class">
            <div id="O">
              <li class="glossary-titles-group pb-1 pt-1">O</li>
            </div>
            <li><a href="/tr/sozluk/Odemeler-Dengesi">Ödemeler Dengesi</a></li>
            <li><a href="/tr/sozluk/Ozel-Sektor-Yurtdisi-Kredileri">Özel Sektör Yurtdışı Kredileri</a></li>
          </div>
          <div class="group-class">
            <div id="P">
              <li class="glossary-titles-group pb-1 pt-1">P</li>
            </div>
            <li><a href="/tr/sozluk/Para-Arzi">Para Arzı</a></li>
            <li><a href="/tr/sozluk/Perakende-Satis-Endeksi">Perakende Satış Endeksi</a></li>
            <li><a href="/tr/sozluk/PMI">PMI</a></li>
            <li><a href="/tr/sozluk/Politika-Faizi">Politika Faizi</a></li>
            <li><a href="/tr/sozluk/Portfoy-Yatirimlari">Portföy Yatırımları</a></li>
          </div>
          <div class="group-class">
            <div id="R">
              <li class="glossary-titles-group pb-1 pt-1">R</li>
            </div>
            <li><a href="/tr/sozluk/Reel-Efektif-Doviz-Kuru">Reel Efektif Döviz Kuru</a></li>
            <li><a href="/tr/sozluk/Reel-Kesim-Guven-Endeksi">Reel Kesim Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/ROM/ROK">ROM/ROK</a></li>
          </div>
          <div class="group-class">
            <div id="S">
              <li class="glossary-titles-group pb-1 pt-1">S</li>
            </div>
            <li><a href="/tr/sozluk/SAMEKS">SAMEKS</a></li>
            <li><a href="/tr/sozluk/Sanayi-Ciro-Endeksi">Sanayi Ciro Endeksi</a></li>
            <li><a href="/tr/sozluk/Sanayi-Uretim-Endeksi">Sanayi Üretim Endeksi</a></li>
            <li><a href="/tr/sozluk/Satinalma-Gucu-Paritesi">Satınalma Gücü Paritesi</a></li>
            <li><a href="/tr/sozluk/Sektorel-Guven-Endeksi">Sektörel Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Sermaye-Yeterlilik-Orani">Sermaye Yeterlilik Oranı</a></li>
            <li><a href="/tr/sozluk/Sinir-Giris-Cikis-Istatistikleri">Sınır Giriş/Çıkış İstatistikleri</a></li>
          </div>
          <div class="group-class">
            <div id="T">
              <li class="glossary-titles-group pb-1 pt-1">T</li>
            </div>
            <li><a href="/tr/sozluk/Tarim-UFE">Tarım ÜFE</a></li>
            <li><a href="/tr/sozluk/Tarimsal-Girdi-Fiyat-Endeksi">Tarımsal Girdi Fiyat Endeksi</a></li>
            <li><a href="/tr/sozluk/TCMB-Beklenti-Anketi">TCMB Beklenti Anketi</a></li>
            <li><a href="/tr/sozluk/TCMB-Bilancosu">TCMB Bilançosu</a></li>
            <li><a href="/tr/sozluk/Ticari-Kredi-Buyumesi">Ticari Kredi Büyümesi</a></li>
            <li><a href="/tr/sozluk/Toplam-Ciro-Endeksleri">Toplam Ciro Endeksleri</a></li>
            <li><a href="/tr/sozluk/TUFE">TÜFE</a></li>
            <li><a href="/tr/sozluk/TUFE---Cekirdek">TÜFE - Çekirdek</a></li>
            <li><a href="/tr/sozluk/Tuketici-Guven-Endeksi">Tüketici Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Turk-Is-Gida-Endeksi">Türk-İş Gıda Endeksi</a></li>
          </div>
          <div class="group-class">
            <div id="U">
              <li class="glossary-titles-group pb-1 pt-1">U</li>
            </div>
            <li><a href="/tr/sozluk/Uluslararasi-Rezervler-ve-Doviz-Likiditesi">Uluslararası Rezervler ve Döviz Likiditesi</a></li>
            <li><a href="/tr/sozluk/Uluslararasi-Yatirim-Pozisyonu">Uluslararası Yatırım Pozisyonu</a></li>
            <li><a href="/tr/sozluk/Uluslararasi-Yukumlulukler">Uluslararası Yükümlülükler</a></li>
          </div>
          <div class="group-class">
            <div id="V">
              <li class="glossary-titles-group pb-1 pt-1">V</li>
            </div>
            <li><a href="/tr/sozluk/Vergi-Tahakkuk-Tahsil-Orani">Vergi Tahakkuk / Tahsil Oranı</a></li>
          </div>
          <div class="group-class">
            <div id="Y">
              <li class="glossary-titles-group pb-1 pt-1">Y</li>
            </div>
            <li><a href="/tr/sozluk/Yabanci-Para-Mevduatlari">Yabancı Para Mevduatları</a></li>
            <li><a href="/tr/sozluk/YD-UFE">YD-ÜFE</a></li>
            <li><a href="/tr/sozluk/YI-UFE">Yİ-ÜFE</a></li>
            <li><a href="/tr/sozluk/Yurtdisi-Yukumlulukler">Yurtdışı Yükümlülükler</a></li>
          </div>
        </ul><span class="visible-bottom"></span>
      </div>
    </div>
  </div>
  <div class="glossary-content p-3 mt-1-sm border-shadow">
    <div tabindex="-1" style="outline: none;">
      <div class="glossary-content-container ">
        <h2>Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</h2>
        <div class="d-flex flex-wrap justify-content-between mb-3 ">
          <table>
            <tr>
              <td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Yayınlayan Kurum</span><span class="glossary-content-container-title-dots">:</span></td>
              <td class="glossary-content-container-td">TCMB</td>
            </tr>
            <tr>
              <td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">İlk Yayınlanma Tarihi</span><span class="glossary-content-container-title-dots">:</span></td>
              <td class="glossary-content-container-td">Aralık 2002</td>
            </tr>
            <tr>
              <td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Periyodu</span><span class="glossary-content-container-title-dots">:</span></td>
              <td class="glossary-content-container-td">Aylık</td>
            </tr>
          </table><img alt="Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu" src="/images/glossary/risk/risk-2.png">
        </div>
      </div>
      <div>
        Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
        bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de
        Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan
        "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de
        1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan
        2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini
        incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak
        kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum
        metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum
        rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen
        ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi
        ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32
        sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan
        İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki
        Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.
        Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde
        çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir.
        Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45
        tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan
        'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve
        1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.
        1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden
        yeniden üretilmiştir.

      </div>
    </div>
  </div>

只需将 height: 100%; 添加到 <div class="d-flex border-shadow">

ul {
  margin: 0;
  list-style: none;
}

li {
  margin: 0;
  list-style: none;
}

.glossary {
  display: flex;
}

.glossary-items {
  border-radius: inherit;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.glossary-items-str {
  align-self: stretch;
}

.glossary-letters {
  border-radius: inherit;
  text-align: right;
  background-color: white;
  line-height: 1.3 !important;
  display: flex;
  width: 50px;
}

.glossary-letters ul {
  width: 100%;
  margin-left: 0 !important;
}

.glossary-letters ul li {
  width: 100%;
}

.glossary-letters a {
  color: #2b2b2b;
  display: block;
}

.glossary-letters a:not(.glossary-titles-active):hover {
  color: #68b;
}

.glossary-titles {
  border-radius: inherit;
  position: relative;
  top: 0;
  position: sticky;
  background-color: white;
}

.glossary-titles ul::-webkit-scrollbar {
  width: 5px;
  height: 0.5em;
}

.glossary-titles ul::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

.glossary-titles ul::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 100px;
  border: 1px solid #d8d8d8;
  max-height: 50px;
}

.glossary-titles ul::-webkit-scrollbar-track {
  background: #d8d8d8;
  border-radius: 100px;
}

.glossary-titles-active {
  color: #137;
  font-weight: bold;
}

.glossary-titles-group {
  font-size: 1.5em;
  color: #137;
  font-weight: bold;
  position: sticky;
  background: white;
  top: 0 !important;
}

.glossary-titles a:not(.glossary-titles-active):hover {
  color: #68b;
}

.glossary-titles ul {
  overflow-y: auto;
  height: 430px;
}

.glossary-content {
  background-color: white;
  flex: 2;
}

.glossary-content dl {
  flex: 2;
}

.glossary-content h4 {
  margin-top: 2.9em !important;
}

.glossary-content-container-title {
  padding-right: 7px;
  white-space: nowrap;
  font-weight: 700;
  position: relative;
}

.glossary-content-container-title-dots {
  position: absolute;
  right: 0;
  margin-left: 5px;
  display: inline-block;
  font-weight: bold;
}

.glossary-content-container img {
  object-fit: contain;
  width: 150px;
}

.glossary-content ul {
  margin: 0;
}

.glossary-content a:hover {
  color: #68b;
}

.active,
.glossary-letters-link-A {
  background-color: #68b;
  color: white !important;
  border: solid;
  padding: 0 10px;
  border-radius: 0 10px 5px 0;
  transition: padding 0.11s ease;
}

<div class="glossary-items grid ">
  <div class="glossary-items-str">
    <div class="d-flex  border-shadow" style="height: 100%;">

      <div class="glossary-titles">
        <ul>
          <div class="group-class">
            <div id="A">
              It should be position sticky when scroll page down
              <li class="glossary-titles-group pb-1 pt-1">A</li>
            </div>
            <li><a href="/tr/sozluk/Acik-Piyasa-Islemleri-API">Açık Piyasa İşlemleri (APİ)</a></li>
            <li><a href="/tr/sozluk/Agirlikli-Ortalama-Fonlama-Maliyeti">Ağırlıklı Ortalama Fonlama Maliyeti</a></li>
          </div>
          <div class="group-class">
            <div id="B">
              <li class="glossary-titles-group pb-1 pt-1">B</li>
            </div>
            <li><a href="/tr/sozluk/BIST-100-Endeksi">BİST-100 Endeksi</a></li>
            <li><a href="/tr/sozluk/Bina-Maliyet-Endeksi">Bina Maliyet Endeksi</a></li>
            <li><a href="/tr/sozluk/Bireysel-Kredi-Buyumesi">Bireysel Kredi Büyümesi</a></li>
            <li><a href="/tr/sozluk/Borc-Cevirme-Orani">Borç Çevirme Oranı</a></li>
          </div>
          <div class="group-class">
            <div id="C">
              <li class="glossary-titles-group pb-1 pt-1">C</li>
            </div>
            <li><a href="/tr/sozluk/CDS">CDS</a></li>
          </div>
          <div class="group-class">
            <div id="D">
              <li class="glossary-titles-group pb-1 pt-1">D</li>
            </div>
            <li><a href="/tr/sozluk/Dis-Ticaret-Beklenti-Anketi">Dış Ticaret Beklenti Anketi</a></li>
            <li><a href="/tr/sozluk/Dis-Ticaret-Endeksi">Dış Ticaret Endeksi</a></li>
            <li><a href="/tr/sozluk/Dis-Ticaret-Istatistikleri">Dış Ticaret İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Dogrudan-Yabanci-Sermaye-Yatirimi">Doğrudan Yabancı Sermaye Yatırımı</a></li>
            <li><a href="/tr/sozluk/Doviz-Kuru">Döviz Kuru</a></li>
          </div>
          <div class="group-class">
            <div id="E">
              <li class="glossary-titles-group pb-1 pt-1">E</li>
            </div>
            <li><a href="/tr/sozluk/Ekonomik-Guven-Endeksi">Ekonomik Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Emisyon">Emisyon</a></li>
          </div>
          <div class="group-class">
            <div id="F">
              <li class="glossary-titles-group pb-1 pt-1">F</li>
            </div>
            <li><a href="/tr/sozluk/Faiz-Disi-Denge">Faiz Dışı Denge</a></li>
            <li><a href="/tr/sozluk/Finansal-Hizmetler-Guven-Endeksi">Finansal Hizmetler Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Finansal-Kesim-Disi-Firmalarin-Net-Doviz-Pozisyonu" aria-current="page" class="glossary-titles-active">Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</a></li>
          </div>
          <div class="group-class">
            <div id="G">
              <li class="glossary-titles-group pb-1 pt-1">G</li>
            </div>
            <li><a href="/tr/sozluk/Gec-Likidite-Penceresi">Geç Likidite Penceresi</a></li>
            <li><a href="/tr/sozluk/Genc-Issizlik">Genç İşsizlik</a></li>
            <li><a href="/tr/sozluk/Getiri-Verim-Egrisi">Getiri Verim Eğrisi</a></li>
            <li><a href="/tr/sozluk/Gosterge-Faiz">Gösterge Faiz</a></li>
            <li><a href="/tr/sozluk/GSYH---Buyume">GSYH - Büyüme</a></li>
            <li><a href="/tr/sozluk/GSYH---Uretim-Yontemi">GSYH - Üretim Yöntemi</a></li>
          </div>
          <div class="group-class">
            <div id="H">
              <li class="glossary-titles-group pb-1 pt-1">H</li>
            </div>
            <li><a href="/tr/sozluk/Hayvan-Uretim-Istatistikleri">Hayvan Üretim İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Hazine-Nakit-Gerceklesmeleri">Hazine Nakit Gerçekleşmeleri</a></li>
            <li><a href="/tr/sozluk/Hizmet-Uretici-Fiyat-Endeksi">Hizmet Üretici Fiyat Endeksi</a></li>
          </div>
          <div class="group-class">
            <div id="I">
              <li class="glossary-titles-group pb-1 pt-1">I</li>
            </div>
            <li><a href="/tr/sozluk/Ihracat-Iklimi-Endeksi">İhracat İklimi Endeksi</a></li>
            <li><a href="/tr/sozluk/Insaat-Maliyet-Endeksi">İnşaat Maliyet Endeksi</a></li>
            <li><a href="/tr/sozluk/Isgucu-Gostergeleri">İşgücü Göstergeleri</a></li>
            <li><a href="/tr/sozluk/Issizlik">İşsizlik</a></li>
            <li><a href="/tr/sozluk/Istanbul-Ucretliler-Gecinme-Endeksi">İstanbul Ücretliler Geçinme Endeksi</a></li>
          </div>
          <div class="group-class">
            <div id="K">
              <li class="glossary-titles-group pb-1 pt-1">K</li>
            </div>
            <li><a href="/tr/sozluk/Kamu-Borclanmasi">Kamu Borçlanması</a></li>
            <li><a href="/tr/sozluk/Kapasite-Kullanim-Orani">Kapasite Kullanım Oranı</a></li>
            <li><a href="/tr/sozluk/Kisa-Vadeli-Dis-Borc-Istatistikleri">Kısa Vadeli Dış Borç İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Kisibasi-GSYH">Kişibaşı GSYH</a></li>
            <li><a href="/tr/sozluk/Konut-Fiyat-Endeksi">Konut Fiyat Endeksi</a></li>
            <li><a href="/tr/sozluk/Konut-Satislari">Konut Satışları</a></li>
            <li><a href="/tr/sozluk/Kredi/Mevduat-Orani">Kredi/Mevduat Oranı</a></li>
          </div>
          <div class="group-class">
            <div id="L">
              <li class="glossary-titles-group pb-1 pt-1">L</li>
            </div>
            <li><a href="/tr/sozluk/Lorenz-Egrisi-Gini-Katsayisi">Lorenz Eğrisi / Gini Katsayısı</a></li>
          </div>
          <div class="group-class">
            <div id="M">
              <li class="glossary-titles-group pb-1 pt-1">M</li>
            </div>
            <li><a href="/tr/sozluk/Menkul-Kiymet-Istatistikleri">Menkul Kıymet İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Merkez-Bankasi-Rezervleri">Merkez Bankası Rezervleri</a></li>
            <li><a href="/tr/sozluk/Merkezi-Yonetim-Butcesi">Merkezi Yönetim Bütçesi</a></li>
            <li><a href="/tr/sozluk/Motorlu-Kara-Tasitlari-Istatistikleri">Motorlu Kara Taşıtları İstatistikleri</a></li>
          </div>
          <div class="group-class">
            <div id="N">
              <li class="glossary-titles-group pb-1 pt-1">N</li>
            </div>
            <li><a href="/tr/sozluk/Net-Hata-Noksan">Net Hata Noksan</a></li>
          </div>
          <div class="group-class">
            <div id="O">
              <li class="glossary-titles-group pb-1 pt-1">O</li>
            </div>
            <li><a href="/tr/sozluk/Odemeler-Dengesi">Ödemeler Dengesi</a></li>
            <li><a href="/tr/sozluk/Ozel-Sektor-Yurtdisi-Kredileri">Özel Sektör Yurtdışı Kredileri</a></li>
          </div>
          <div class="group-class">
            <div id="P">
              <li class="glossary-titles-group pb-1 pt-1">P</li>
            </div>
            <li><a href="/tr/sozluk/Para-Arzi">Para Arzı</a></li>
            <li><a href="/tr/sozluk/Perakende-Satis-Endeksi">Perakende Satış Endeksi</a></li>
            <li><a href="/tr/sozluk/PMI">PMI</a></li>
            <li><a href="/tr/sozluk/Politika-Faizi">Politika Faizi</a></li>
            <li><a href="/tr/sozluk/Portfoy-Yatirimlari">Portföy Yatırımları</a></li>
          </div>
          <div class="group-class">
            <div id="R">
              <li class="glossary-titles-group pb-1 pt-1">R</li>
            </div>
            <li><a href="/tr/sozluk/Reel-Efektif-Doviz-Kuru">Reel Efektif Döviz Kuru</a></li>
            <li><a href="/tr/sozluk/Reel-Kesim-Guven-Endeksi">Reel Kesim Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/ROM/ROK">ROM/ROK</a></li>
          </div>
          <div class="group-class">
            <div id="S">
              <li class="glossary-titles-group pb-1 pt-1">S</li>
            </div>
            <li><a href="/tr/sozluk/SAMEKS">SAMEKS</a></li>
            <li><a href="/tr/sozluk/Sanayi-Ciro-Endeksi">Sanayi Ciro Endeksi</a></li>
            <li><a href="/tr/sozluk/Sanayi-Uretim-Endeksi">Sanayi Üretim Endeksi</a></li>
            <li><a href="/tr/sozluk/Satinalma-Gucu-Paritesi">Satınalma Gücü Paritesi</a></li>
            <li><a href="/tr/sozluk/Sektorel-Guven-Endeksi">Sektörel Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Sermaye-Yeterlilik-Orani">Sermaye Yeterlilik Oranı</a></li>
            <li><a href="/tr/sozluk/Sinir-Giris-Cikis-Istatistikleri">Sınır Giriş/Çıkış İstatistikleri</a></li>
          </div>
          <div class="group-class">
            <div id="T">
              <li class="glossary-titles-group pb-1 pt-1">T</li>
            </div>
            <li><a href="/tr/sozluk/Tarim-UFE">Tarım ÜFE</a></li>
            <li><a href="/tr/sozluk/Tarimsal-Girdi-Fiyat-Endeksi">Tarımsal Girdi Fiyat Endeksi</a></li>
            <li><a href="/tr/sozluk/TCMB-Beklenti-Anketi">TCMB Beklenti Anketi</a></li>
            <li><a href="/tr/sozluk/TCMB-Bilancosu">TCMB Bilançosu</a></li>
            <li><a href="/tr/sozluk/Ticari-Kredi-Buyumesi">Ticari Kredi Büyümesi</a></li>
            <li><a href="/tr/sozluk/Toplam-Ciro-Endeksleri">Toplam Ciro Endeksleri</a></li>
            <li><a href="/tr/sozluk/TUFE">TÜFE</a></li>
            <li><a href="/tr/sozluk/TUFE---Cekirdek">TÜFE - Çekirdek</a></li>
            <li><a href="/tr/sozluk/Tuketici-Guven-Endeksi">Tüketici Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Turk-Is-Gida-Endeksi">Türk-İş Gıda Endeksi</a></li>
          </div>
          <div class="group-class">
            <div id="U">
              <li class="glossary-titles-group pb-1 pt-1">U</li>
            </div>
            <li><a href="/tr/sozluk/Uluslararasi-Rezervler-ve-Doviz-Likiditesi">Uluslararası Rezervler ve Döviz Likiditesi</a></li>
            <li><a href="/tr/sozluk/Uluslararasi-Yatirim-Pozisyonu">Uluslararası Yatırım Pozisyonu</a></li>
            <li><a href="/tr/sozluk/Uluslararasi-Yukumlulukler">Uluslararası Yükümlülükler</a></li>
          </div>
          <div class="group-class">
            <div id="V">
              <li class="glossary-titles-group pb-1 pt-1">V</li>
            </div>
            <li><a href="/tr/sozluk/Vergi-Tahakkuk-Tahsil-Orani">Vergi Tahakkuk / Tahsil Oranı</a></li>
          </div>
          <div class="group-class">
            <div id="Y">
              <li class="glossary-titles-group pb-1 pt-1">Y</li>
            </div>
            <li><a href="/tr/sozluk/Yabanci-Para-Mevduatlari">Yabancı Para Mevduatları</a></li>
            <li><a href="/tr/sozluk/YD-UFE">YD-ÜFE</a></li>
            <li><a href="/tr/sozluk/YI-UFE">Yİ-ÜFE</a></li>
            <li><a href="/tr/sozluk/Yurtdisi-Yukumlulukler">Yurtdışı Yükümlülükler</a></li>
          </div>
        </ul><span class="visible-bottom"></span>
      </div>
    </div>
  </div>
  <div class="glossary-content p-3 mt-1-sm border-shadow">
    <div tabindex="-1" style="outline: none;">
      <div class="glossary-content-container ">
        <h2>Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</h2>
        <div class="d-flex flex-wrap justify-content-between mb-3 ">
          <table>
            <tr>
              <td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Yayınlayan Kurum</span><span class="glossary-content-container-title-dots">:</span></td>
              <td class="glossary-content-container-td">TCMB</td>
            </tr>
            <tr>
              <td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">İlk Yayınlanma Tarihi</span><span class="glossary-content-container-title-dots">:</span></td>
              <td class="glossary-content-container-td">Aralık 2002</td>
            </tr>
            <tr>
              <td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Periyodu</span><span class="glossary-content-container-title-dots">:</span></td>
              <td class="glossary-content-container-td">Aylık</td>
            </tr>
          </table><img alt="Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu" src="/images/glossary/risk/risk-2.png">
        </div>
      </div>
      <div>
        Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
        bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de
        Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan
        "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de
        1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan
        2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini
        incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak
        kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum
        metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum
        rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen
        ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi
        ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32
        sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan
        İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki
        Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.
        Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde
        çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir.
        Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45
        tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan
        'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve
        1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.
        1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden
        yeniden üretilmiştir.

      </div>
    </div>
  </div>

在您的站点中，

  1. 将 position: sticky;top: 0;align-self: flex-start; 添加到 <div class="d-flex border-shadow">

  1. 从 <div class="glossary-items grid">
    2. 中删除 overflow: hidden;

position: sticky不适用于overflow: hidden 如果你必须使用overflow: hidden，你必须找到另一种方法。

将 position: sticky; 和 top: 0; 添加到要设为粘性且具有 class="d-flex border-shadow" 属性的 div 元素。

你必须设置

top: 0;
position: sticky;

到d-flex border-shadow而不是glossary-titles。

ul {
  margin: 0;
  list-style: none;
}

li {
  margin: 0;
  list-style: none;
}

.glossary {
  display: flex;
}

.glossary-items {
  border-radius: inherit;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.glossary-items-str {
  align-self: stretch;
}

.glossary-letters {
  border-radius: inherit;
  text-align: right;
  background-color: white;
  line-height: 1.3 !important;
  display: flex;
  width: 50px;
}

.glossary-letters ul {
  width: 100%;
  margin-left: 0 !important;
}

.glossary-letters ul li {
  width: 100%;
}

.glossary-letters a {
  color: #2b2b2b;
  display: block;
}

.glossary-letters a:not(.glossary-titles-active):hover {
  color: #68b;
}

.stick {
  top: 0;
  position: sticky;
 }

.glossary-titles {
  border-radius: inherit;
  position: relative;
  background-color: white;
}

.glossary-titles ul::-webkit-scrollbar {
  width: 5px;
  height: 0.5em;
}

.glossary-titles ul::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

.glossary-titles ul::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 100px;
  border: 1px solid #d8d8d8;
  max-height: 50px;
}

.glossary-titles ul::-webkit-scrollbar-track {
  background: #d8d8d8;
  border-radius: 100px;
}

.glossary-titles-active {
  color: #137;
  font-weight: bold;
}

.glossary-titles-group {
  font-size: 1.5em;
  color: #137;
  font-weight: bold;
  position: sticky;
  background: white;
  top: 0 !important;
}

.glossary-titles a:not(.glossary-titles-active):hover {
  color: #68b;
}

.glossary-titles ul {
  overflow-y: auto;
  height: 430px;
}

.glossary-content {
  background-color: white;
  flex: 2;
}

.glossary-content dl {
  flex: 2;
}

.glossary-content h4 {
  margin-top: 2.9em !important;
}

.glossary-content-container-title {
  padding-right: 7px;
  white-space: nowrap;
  font-weight: 700;
  position: relative;
}

.glossary-content-container-title-dots {
  position: absolute;
  right: 0;
  margin-left: 5px;
  display: inline-block;
  font-weight: bold;
}

.glossary-content-container img {
  object-fit: contain;
  width: 150px;
}

.glossary-content ul {
  margin: 0;
}

.glossary-content a:hover {
  color: #68b;
}

.active,
.glossary-letters-link-A {
  background-color: #68b;
  color: white !important;
  border: solid;
  padding: 0 10px;
  border-radius: 0 10px 5px 0;
  transition: padding 0.11s ease;
}

<<div class="glossary-items grid ">
  <div class="glossary-items-str">
    <div class="d-flex  border-shadow stick">

      <div class="glossary-titles">
        <ul>
          <div class="group-class">
            <div id="A">
              It should be position sticky when scroll page down
              <li class="glossary-titles-group pb-1 pt-1">A</li>
            </div>
            <li><a href="/tr/sozluk/Acik-Piyasa-Islemleri-API">Açık Piyasa İşlemleri (APİ)</a></li>
            <li><a href="/tr/sozluk/Agirlikli-Ortalama-Fonlama-Maliyeti">Ağırlıklı Ortalama Fonlama Maliyeti</a></li>
          </div>
          <div class="group-class">
            <div id="B">
              <li class="glossary-titles-group pb-1 pt-1">B</li>
            </div>
            <li><a href="/tr/sozluk/BIST-100-Endeksi">BİST-100 Endeksi</a></li>
            <li><a href="/tr/sozluk/Bina-Maliyet-Endeksi">Bina Maliyet Endeksi</a></li>
            <li><a href="/tr/sozluk/Bireysel-Kredi-Buyumesi">Bireysel Kredi Büyümesi</a></li>
            <li><a href="/tr/sozluk/Borc-Cevirme-Orani">Borç Çevirme Oranı</a></li>
          </div>
          <div class="group-class">
            <div id="C">
              <li class="glossary-titles-group pb-1 pt-1">C</li>
            </div>
            <li><a href="/tr/sozluk/CDS">CDS</a></li>
          </div>
          <div class="group-class">
            <div id="D">
              <li class="glossary-titles-group pb-1 pt-1">D</li>
            </div>
            <li><a href="/tr/sozluk/Dis-Ticaret-Beklenti-Anketi">Dış Ticaret Beklenti Anketi</a></li>
            <li><a href="/tr/sozluk/Dis-Ticaret-Endeksi">Dış Ticaret Endeksi</a></li>
            <li><a href="/tr/sozluk/Dis-Ticaret-Istatistikleri">Dış Ticaret İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Dogrudan-Yabanci-Sermaye-Yatirimi">Doğrudan Yabancı Sermaye Yatırımı</a></li>
            <li><a href="/tr/sozluk/Doviz-Kuru">Döviz Kuru</a></li>
          </div>
          <div class="group-class">
            <div id="E">
              <li class="glossary-titles-group pb-1 pt-1">E</li>
            </div>
            <li><a href="/tr/sozluk/Ekonomik-Guven-Endeksi">Ekonomik Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Emisyon">Emisyon</a></li>
          </div>
          <div class="group-class">
            <div id="F">
              <li class="glossary-titles-group pb-1 pt-1">F</li>
            </div>
            <li><a href="/tr/sozluk/Faiz-Disi-Denge">Faiz Dışı Denge</a></li>
            <li><a href="/tr/sozluk/Finansal-Hizmetler-Guven-Endeksi">Finansal Hizmetler Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Finansal-Kesim-Disi-Firmalarin-Net-Doviz-Pozisyonu" aria-current="page" class="glossary-titles-active">Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</a></li>
          </div>
          <div class="group-class">
            <div id="G">
              <li class="glossary-titles-group pb-1 pt-1">G</li>
            </div>
            <li><a href="/tr/sozluk/Gec-Likidite-Penceresi">Geç Likidite Penceresi</a></li>
            <li><a href="/tr/sozluk/Genc-Issizlik">Genç İşsizlik</a></li>
            <li><a href="/tr/sozluk/Getiri-Verim-Egrisi">Getiri Verim Eğrisi</a></li>
            <li><a href="/tr/sozluk/Gosterge-Faiz">Gösterge Faiz</a></li>
            <li><a href="/tr/sozluk/GSYH---Buyume">GSYH - Büyüme</a></li>
            <li><a href="/tr/sozluk/GSYH---Uretim-Yontemi">GSYH - Üretim Yöntemi</a></li>
          </div>
          <div class="group-class">
            <div id="H">
              <li class="glossary-titles-group pb-1 pt-1">H</li>
            </div>
            <li><a href="/tr/sozluk/Hayvan-Uretim-Istatistikleri">Hayvan Üretim İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Hazine-Nakit-Gerceklesmeleri">Hazine Nakit Gerçekleşmeleri</a></li>
            <li><a href="/tr/sozluk/Hizmet-Uretici-Fiyat-Endeksi">Hizmet Üretici Fiyat Endeksi</a></li>
          </div>
          <div class="group-class">
            <div id="I">
              <li class="glossary-titles-group pb-1 pt-1">I</li>
            </div>
            <li><a href="/tr/sozluk/Ihracat-Iklimi-Endeksi">İhracat İklimi Endeksi</a></li>
            <li><a href="/tr/sozluk/Insaat-Maliyet-Endeksi">İnşaat Maliyet Endeksi</a></li>
            <li><a href="/tr/sozluk/Isgucu-Gostergeleri">İşgücü Göstergeleri</a></li>
            <li><a href="/tr/sozluk/Issizlik">İşsizlik</a></li>
            <li><a href="/tr/sozluk/Istanbul-Ucretliler-Gecinme-Endeksi">İstanbul Ücretliler Geçinme Endeksi</a></li>
          </div>
          <div class="group-class">
            <div id="K">
              <li class="glossary-titles-group pb-1 pt-1">K</li>
            </div>
            <li><a href="/tr/sozluk/Kamu-Borclanmasi">Kamu Borçlanması</a></li>
            <li><a href="/tr/sozluk/Kapasite-Kullanim-Orani">Kapasite Kullanım Oranı</a></li>
            <li><a href="/tr/sozluk/Kisa-Vadeli-Dis-Borc-Istatistikleri">Kısa Vadeli Dış Borç İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Kisibasi-GSYH">Kişibaşı GSYH</a></li>
            <li><a href="/tr/sozluk/Konut-Fiyat-Endeksi">Konut Fiyat Endeksi</a></li>
            <li><a href="/tr/sozluk/Konut-Satislari">Konut Satışları</a></li>
            <li><a href="/tr/sozluk/Kredi/Mevduat-Orani">Kredi/Mevduat Oranı</a></li>
          </div>
          <div class="group-class">
            <div id="L">
              <li class="glossary-titles-group pb-1 pt-1">L</li>
            </div>
            <li><a href="/tr/sozluk/Lorenz-Egrisi-Gini-Katsayisi">Lorenz Eğrisi / Gini Katsayısı</a></li>
          </div>
          <div class="group-class">
            <div id="M">
              <li class="glossary-titles-group pb-1 pt-1">M</li>
            </div>
            <li><a href="/tr/sozluk/Menkul-Kiymet-Istatistikleri">Menkul Kıymet İstatistikleri</a></li>
            <li><a href="/tr/sozluk/Merkez-Bankasi-Rezervleri">Merkez Bankası Rezervleri</a></li>
            <li><a href="/tr/sozluk/Merkezi-Yonetim-Butcesi">Merkezi Yönetim Bütçesi</a></li>
            <li><a href="/tr/sozluk/Motorlu-Kara-Tasitlari-Istatistikleri">Motorlu Kara Taşıtları İstatistikleri</a></li>
          </div>
          <div class="group-class">
            <div id="N">
              <li class="glossary-titles-group pb-1 pt-1">N</li>
            </div>
            <li><a href="/tr/sozluk/Net-Hata-Noksan">Net Hata Noksan</a></li>
          </div>
          <div class="group-class">
            <div id="O">
              <li class="glossary-titles-group pb-1 pt-1">O</li>
            </div>
            <li><a href="/tr/sozluk/Odemeler-Dengesi">Ödemeler Dengesi</a></li>
            <li><a href="/tr/sozluk/Ozel-Sektor-Yurtdisi-Kredileri">Özel Sektör Yurtdışı Kredileri</a></li>
          </div>
          <div class="group-class">
            <div id="P">
              <li class="glossary-titles-group pb-1 pt-1">P</li>
            </div>
            <li><a href="/tr/sozluk/Para-Arzi">Para Arzı</a></li>
            <li><a href="/tr/sozluk/Perakende-Satis-Endeksi">Perakende Satış Endeksi</a></li>
            <li><a href="/tr/sozluk/PMI">PMI</a></li>
            <li><a href="/tr/sozluk/Politika-Faizi">Politika Faizi</a></li>
            <li><a href="/tr/sozluk/Portfoy-Yatirimlari">Portföy Yatırımları</a></li>
          </div>
          <div class="group-class">
            <div id="R">
              <li class="glossary-titles-group pb-1 pt-1">R</li>
            </div>
            <li><a href="/tr/sozluk/Reel-Efektif-Doviz-Kuru">Reel Efektif Döviz Kuru</a></li>
            <li><a href="/tr/sozluk/Reel-Kesim-Guven-Endeksi">Reel Kesim Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/ROM/ROK">ROM/ROK</a></li>
          </div>
          <div class="group-class">
            <div id="S">
              <li class="glossary-titles-group pb-1 pt-1">S</li>
            </div>
            <li><a href="/tr/sozluk/SAMEKS">SAMEKS</a></li>
            <li><a href="/tr/sozluk/Sanayi-Ciro-Endeksi">Sanayi Ciro Endeksi</a></li>
            <li><a href="/tr/sozluk/Sanayi-Uretim-Endeksi">Sanayi Üretim Endeksi</a></li>
            <li><a href="/tr/sozluk/Satinalma-Gucu-Paritesi">Satınalma Gücü Paritesi</a></li>
            <li><a href="/tr/sozluk/Sektorel-Guven-Endeksi">Sektörel Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Sermaye-Yeterlilik-Orani">Sermaye Yeterlilik Oranı</a></li>
            <li><a href="/tr/sozluk/Sinir-Giris-Cikis-Istatistikleri">Sınır Giriş/Çıkış İstatistikleri</a></li>
          </div>
          <div class="group-class">
            <div id="T">
              <li class="glossary-titles-group pb-1 pt-1">T</li>
            </div>
            <li><a href="/tr/sozluk/Tarim-UFE">Tarım ÜFE</a></li>
            <li><a href="/tr/sozluk/Tarimsal-Girdi-Fiyat-Endeksi">Tarımsal Girdi Fiyat Endeksi</a></li>
            <li><a href="/tr/sozluk/TCMB-Beklenti-Anketi">TCMB Beklenti Anketi</a></li>
            <li><a href="/tr/sozluk/TCMB-Bilancosu">TCMB Bilançosu</a></li>
            <li><a href="/tr/sozluk/Ticari-Kredi-Buyumesi">Ticari Kredi Büyümesi</a></li>
            <li><a href="/tr/sozluk/Toplam-Ciro-Endeksleri">Toplam Ciro Endeksleri</a></li>
            <li><a href="/tr/sozluk/TUFE">TÜFE</a></li>
            <li><a href="/tr/sozluk/TUFE---Cekirdek">TÜFE - Çekirdek</a></li>
            <li><a href="/tr/sozluk/Tuketici-Guven-Endeksi">Tüketici Güven Endeksi</a></li>
            <li><a href="/tr/sozluk/Turk-Is-Gida-Endeksi">Türk-İş Gıda Endeksi</a></li>
          </div>
          <div class="group-class">
            <div id="U">
              <li class="glossary-titles-group pb-1 pt-1">U</li>
            </div>
            <li><a href="/tr/sozluk/Uluslararasi-Rezervler-ve-Doviz-Likiditesi">Uluslararası Rezervler ve Döviz Likiditesi</a></li>
            <li><a href="/tr/sozluk/Uluslararasi-Yatirim-Pozisyonu">Uluslararası Yatırım Pozisyonu</a></li>
            <li><a href="/tr/sozluk/Uluslararasi-Yukumlulukler">Uluslararası Yükümlülükler</a></li>
          </div>
          <div class="group-class">
            <div id="V">
              <li class="glossary-titles-group pb-1 pt-1">V</li>
            </div>
            <li><a href="/tr/sozluk/Vergi-Tahakkuk-Tahsil-Orani">Vergi Tahakkuk / Tahsil Oranı</a></li>
          </div>
          <div class="group-class">
            <div id="Y">
              <li class="glossary-titles-group pb-1 pt-1">Y</li>
            </div>
            <li><a href="/tr/sozluk/Yabanci-Para-Mevduatlari">Yabancı Para Mevduatları</a></li>
            <li><a href="/tr/sozluk/YD-UFE">YD-ÜFE</a></li>
            <li><a href="/tr/sozluk/YI-UFE">Yİ-ÜFE</a></li>
            <li><a href="/tr/sozluk/Yurtdisi-Yukumlulukler">Yurtdışı Yükümlülükler</a></li>
          </div>
        </ul><span class="visible-bottom"></span>
      </div>
    </div>
  </div>
  <div class="glossary-content p-3 mt-1-sm border-shadow">
    <div tabindex="-1" style="outline: none;">
      <div class="glossary-content-container ">
        <h2>Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</h2>
        <div class="d-flex flex-wrap justify-content-between mb-3 ">
          <table>
            <tr>
              <td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Yayınlayan Kurum</span><span class="glossary-content-container-title-dots">:</span></td>
              <td class="glossary-content-container-td">TCMB</td>
            </tr>
            <tr>
              <td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">İlk Yayınlanma Tarihi</span><span class="glossary-content-container-title-dots">:</span></td>
              <td class="glossary-content-container-td">Aralık 2002</td>
            </tr>
            <tr>
              <td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Periyodu</span><span class="glossary-content-container-title-dots">:</span></td>
              <td class="glossary-content-container-td">Aylık</td>
            </tr>
          </table><img alt="Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu" src="/images/glossary/risk/risk-2.png">
        </div>
      </div>
      <div>
        Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
        bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de
        Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan
        "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de
        1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan
        2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini
        incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak
        kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum
        metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum
        rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen
        ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi
        ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32
        sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan
        İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki
        Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.
        Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde
        çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir.
        Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45
        tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan
        'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve
        1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.
        1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden
        yeniden üretilmiştir.

      </div>
    </div>
  </div>