我有一個(gè)面板可以釘在你屏幕的右邊。然而，當(dāng)面板被鎖定(位置固定)時(shí)，覆蓋在面板最左邊的一些展開(kāi)/折疊按鈕被剪切。可以看出問(wèn)題的未固定與固定的屏幕截圖:

未鎖定:

固定:

我確保將固定位置應(yīng)用于實(shí)際面板的直接子級(jí)。panel-inner但默認(rèn)情況下父級(jí)是溢出可見(jiàn)的，所以從我的理解應(yīng)該有任何內(nèi)容溢出。

<div class="panel">
    <div class="panel-inner">
      <div class="panel-body">
        <div id="some-section">
          <div class="section">
            <div class="toggle-section">
              <div class="toggle-section-button">+</div>
            </div>
            <div class="section-panel">
              <div class="section-panel-heading">
                <span class="section-panel-heading-title">Panel Title</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

相關(guān)風(fēng)格:

.pinned {
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 75px);
  background-color: #fff3f3;
}

.panel-body {
  padding: 1.5rem 0;
}

.section {
  border: 1px solid #aaa;
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
}

.toggle-section {
  width: 20px;
  height: 20px;
  position: absolute;
  left: -10px;
  transform: translateY(calc(50% + 5px));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}

這里有一個(gè)工作筆:link。

您可以單擊按鈕來(lái)切換固定類。滾動(dòng)不太好用，但是& quot+& quot；圖標(biāo)被剪切，這是我在實(shí)際網(wǎng)站中遇到的問(wèn)題。

我錯(cuò)過(guò)了什么？我怎樣才能讓圖標(biāo)溢出上升面板？