Scrollbar nur am unteren Rand mit HTML

Question

Ich möchte das die Scrollbar nur am unteren Rand angezeigt wird aber nicht rechts vom DIV Element. Ich habe schon alle möglichen Optionen ausprobiert

visible
scroll
auto
inherit

aber keine liefert das gewünschte Ergebnis.

<style>
div.container {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    padding: 10px;
    overflow: auto;
}
</style>

<div class="container">
Lorem ipsum dolor sit amet consectetuer augue et interdum dui feugiat. Leo eget magna neque Pellentesque non ut diam nibh ligula sem. Molestie facilisi mauris leo sem eleifend id ridiculus Vestibulum et eget. Amet Mauris nulla cursus nunc tellus at condimentum risus elit feugiat. Eleifend pellentesque nibh sem ultrices quis nulla at consequat Nulla pharetra. Adipiscing odio Suspendisse semper mauris montes eget nibh habitant et.

Dolor cursus Lorem semper venenatis tellus In gravida nec ante hac. Adipiscing dictum adipiscing eget nunc faucibus Donec purus tempus odio Vestibulum. Sagittis condimentum Vestibulum aliquet mollis convallis semper Vivamus ut nulla eget. Tincidunt laoreet sed ligula orci et tincidunt in eget feugiat pretium. Vestibulum pulvinar habitasse et justo vel hac adipiscing dapibus enim id. Pretium eget lorem pellentesque Curabitur mattis interdum sed augue dolor nunc. Purus sed et.

Tellus et metus sapien semper ultrices metus pede aliquet porttitor Curabitur. Risus vitae lacus pretium platea sit Nunc aliquet consectetuer tincidunt libero. Mauris quis sit vel condimentum Curabitur parturient nunc massa condimentum cursus. Purus sociis congue ridiculus condimentum ipsum justo condimentum et malesuada auctor. Tellus at vitae facilisi Integer Sed dapibus tellus cursus sociis Nullam. Magnis sapien Duis quis amet massa convallis ac consequat faucibus laoreet. Id.

Pede pellentesque mauris at risus hendrerit ante id elit Sed et. Quisque gravida sapien nibh non nec sem tempor quis vitae dui. Nunc fringilla Nulla leo dui vitae et ut id Nulla nunc. Et In Proin Nunc ac tincidunt nulla mauris amet ut tincidunt. Venenatis Curabitur adipiscing Ut Vestibulum nibh amet dolor adipiscing felis urna. A Nam consectetuer semper elit tellus id fermentum Sed urna.


</div>

Answer 1

Mit

overflow-y: auto

aktivierst du die vertikale Scrollbar, während du die horizontale Scrollbar mit

overflow-x: hidden

ausblendest. Dadurch wird die vertikale Scrollbar nur dann angezeigt, wenn der Inhalt des Containers die verfügbare Höhe überschreitet.

<style>
div.container {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    padding: 10px;
    overflow-y: auto; /* Nur vertikale Scrollbar anzeigen */
    overflow-x: hidden; /* Horizontale Scrollbar ausblenden */
}
</style>