CSS Scrollleiste ausblenden, wenn nicht benötigt

Question

Ich versuche herauszufinden, wie ich das overflow-y:scroll; ausblenden kann, wenn es nicht benötigt wird. Was ich meine ist, dass ich eine Website baue und einen Hauptbereich habe, in dem Beiträge angezeigt werden, und ich möchte die Scrollleiste ausblenden, wenn der Inhalt nicht breiter ist.

Außerdem meine zweite Frage. Ich möchte es so machen, dass wenn die Beiträge die aktuelle Breite überschreiten, die Breite automatisch erhöht wird und der Inhalt nicht aus dem Kasten herausgeht.

Hat jemand eine Idee, wie das gemacht werden kann?

Beitragsbereich:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Hauptwebsite-Container:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

Answer 1

.container {overflow:auto;} 

wird den Trick tun. Wenn du eine bestimmte Richtung steuern möchtest, solltest du auto für diese spezifische Achse setzen. Bspw.

.container {overflow-y:auto;}
.container {overflow-x:hidden;}

Der obige Code wird jedes Überlaufen in der x-Achse verstecken und bei Bedarf einen Scrollbalken in der y-Achse erzeugen. Aber du musst sicherstellen, dass die Standardhöhe deines Inhalts kleiner ist als die Containerhöhe; wenn nicht, wird der Scrollbalken nicht versteckt werden.