Scrollbarer Absatz mit begrenzter Höhe - css, css3, flexbox

ich will machen P um mehr Text aufnehmen zu können, als die Höhe enthalten kann, so dass der Text zum Lesen durchgescrollt werden kann. DIV CLASS="others" hat die richtige Höhe, die ich will. (500px)

Das Problem ist, wenn ich den overflow: scroll Funktion geht es den ganzen Weg bis zum Ende der Seite.

BEARBEITEN: Vergessen zu erwähnen Ich möchte, dass die Titel "News" und "Produkte" ohne die Bildlaufleiste angezeigt werden.

Vielen Dank.

.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: 0px;
padding: 40px 15% 20px 15%;
display: flex;
justify-content: center;
}

.others div {
width: 400px;
display: inline-block;
float: left;
margin: 0px 15px;
}

.others #news {
background-color: black;
color: white;
text-align: center;
}

.others #products {
background-color: black;
color: white;
text-align: center;
}

.others a {
color: white;
text-decoration: none !important;
}

.others #newsfeed, #productsfeed {
margin: 0px;
padding: 10px 0px;
background-color: lightgreen;
}

.others p {
margin: 0px;
padding: 10px 10px;
vertical-align: middle;
height: 800px;
overflow: scroll;
}
<DIV CLASS="others">
<DIV ID="news">
<A HREF="#"><H3 ID="newsfeed">News</H3></A>
<P>News will come here.</P>
</DIV>
<DIV ID="products">
<A HREF="#"><H3 ID="productsfeed">Products</H3></A>
<P>Cool photos here.</P>
</DIV>
</DIV>

Antworten:

2 für die Antwort № 1

Wie ich bereits erwähnt habe mein KommentarDas Problem wird dadurch verursacht, dass eine explizite Höhe für die inneren Absätze angegeben wird.

Außerdem, um die inneren Absätze zu respektieren height von ihren Eltern (#news und #products Flex-Artikel, die die gleiche Höhe ihres Flex-Containers haben, die .other) Du könntest das ändern display Art der Eltern zu flex ebenso und setze ihre flex-direction zu column.

Und dann gib flex: 1; zu den Absätzen wie folgt:

Beispiel hier

#news, #products {
display: flex;
flex-direction: column;
}

#news p, #products p {
flex: 1;
overflow: auto; /* up to you */
}

Als ein Randnotiz: Stellen Sie sicher, dass Sie die alte (vorangestellte) Syntax von flexbox für die Browser-Unterstützung hinzugefügt haben. Du könntest Werkzeuge wie verwenden Autoprefixer um das zu erreichen.


1 für die Antwort № 2

Sie benötigen einen Inhalt div auf die Absätze, dann setzen overflow: scroll; und height: 460px; auf diesem Container (oder welcher Höhe auch immer Sie es haben müssen, innerhalb der 500px groß enthalten) .others Block).

Sie müssen auch sicherstellen, dass Ihre .others div Styling trifft nicht auf diesen Container zu - in meinem Beispiel unten habe ich diesen Selektor in geändert .others > div nur unmittelbare Kinder von auswählen .others. Und du solltest das entfernen height: 800px; von den inneren Absätzen, wie von Hashem Qolami erwähnt.

Beispiel


Speisekarte