переполнения у авто скрывает содержимое

Question

с overflow-y:auto

с overflow-y:scroll

Есть ли какой-нибудь способ, чтобы иметь полосы прокрутки, если она переполняется (и не скрывая содержание), но в то же время удалить его, если он не переполнен?

Текущий CSS:

max-height: 400px; 
    overflow-y: scroll; 
    overflow-x: hidden; <-- do not want horizontal scroll under any circumstances, want the div to respond to the content 

Answer 1

Вы можете попробовать использовать отрицательный margin-right в вашем списке и элемент родительского контейнера с положительным padding-right для компенсации отрицательного края ребенка.

.container { 
 
    width:100px; 
 
    padding-right:10px; 
 
} 
 
ul { 
 
    max-height:100px; 
 
    overflow-y:scroll; 
 
    background-color:yellow; 
 
} 
 
.list-one { 
 
} 
 
.list-two { 
 
    margin-right:-10px; 
 
}

<div class="container"> 
 
<ul class="list-one"> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
</ul> 
 
<ul class="list-two"> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
</ul> 
 
</div>