Как остановить только первую li от прокрутки в списке ul li с переполнением авто?

Question

Я сделал простой список ul li, в котором ul имеет определенную максимальную высоту и переполнение: auto, чтобы он мог прокручиваться, если доступен длинный список. но я пытаюсь исправить первый li и хочу прокрутить все остальные li.

.account-selector__listing.dropdown.is-open {
  margin-bottom: 2rem;
  position: relative;
  max-height: 22rem;
  overflow: auto;
}

<ul class="account-selector__listing ng-scope dropdown is-open">
  <li class="account-selector__item ng-scope active dropdown">
    //want to fix this li and dont want to scroll this
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //some content
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //should scroll
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //should scroll
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //should scroll
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //should scroll
  </li>
</ul>

Есть ли в CSS что-нибудь, что я могу исправить первым li и прокрутить все остальные по вертикали? как это

Answer 1

Вы можете получить его с двумя ул. Дайте мне знать, если два уль работают. Вы можете указать максимальную высоту здесь.

ul:nth-of-type(2) {
 max-height: 80px;
 overflow: auto;
}
.account-selector__item {
margin-bottom: 10px;
}

<ul class="account-selector__listing ng-scope dropdown is-open" >
           <li class="account-selector__item ng-scope active dropdown">
           //fixed contnent
</ul>
<ul class="account-selector__listing ng-scope dropdown is-open" >
           <li class="account-selector__item ng-scope active dropdown">
            //scroll content 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll content 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll scroll 
 </li>
</ul>

Answer 2

Если вы создаете элемент контейнера вокруг ul, вы можете добиться этого эффекта, используя position.

• Установите элемент контейнера на position: relative и задайте ему верхний отступ.
• Установите li:first-child на position: absolute
• Установите ul на position: static, чтобы li:first-child получал свое позиционирование из элемента контейнера вместо ul

.ulOuter {
  position: relative;
  padding-top: 10px;
}

.account-selector__listing.dropdown.is-open {
    margin-bottom: 2rem;
    max-height: 120px;
    overflow: auto;
    position: static;
    box-shadow: 0 0 3px inset #eeeeee;
}

.account-selector__listing.dropdown.is-open li:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="ulOuter">
<ul class="account-selector__listing ng-scope dropdown is-open" >
           <li class="account-selector__item ng-scope active dropdown">
                //want to fix this li and dont want to scroll this
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //some content 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
</ul>
</div>

Answer 3

.account-selector__listing.dropdown.is-open > li:first-child {
    overflow: hidden;
}

попробуйте это, если это не решит проблему, дайте мне знать. Пожалуйста, прокомментируйте это.