HTML/CSS Schrift auserhalb der Box Problem

[Bently.]

Hallo,

Ich habe folgendes Problem auf meiner Test Page.

Unzwar wie die Überschrift schon besagt , die Schrift bleibt nicht in ganz in meiner DIV Box. Hier mal ein Screen + den HTML/CSS Code.

Bild:

 Spoiler

HTML:

 Spoiler

PHP Code:

<div id="new-container">
    <div class="con1">
    <h1>Introduction</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div> 


CSS:

 Spoiler

PHP Code:


#new-container {
display:flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
margin:0px;
padding:0px;
}

.con1 {
display:flex;
margin-top:10px;
padding:0;
height:250px;
width:100%;
background:#FFF;
justifiy-content:space-around;
-webkit-flex-flow:row wrap;
font-size:1.4em;
}

.con1 h1 {
padding:0px;
margin:25px;
color:Tomato;
font-family:sans-serif;
font-size:1.7em;
}

.con1 p {
padding:0px;
margin:25px;
color:Tomato;
font-family:sans-serif;
font-size:1.7em;
line-height:1.2em;
} 


Freue mich auf jede hilfreiche Antwort

[anytimee]

Du musst das beim Container - hier con1 anpassen.

Beispiel:

width: auto; und height: auto;
die Breite des Inhalts an und wird mit
margin-left: auto; und margin-right: auto;
zentriert dargestellt.

Egal wie viel Text du jetzt hast, wird die Box dementsprechend "mitgezogen".


Ich hoffe, ich konnte helfen. :-D

[Warnuk3r]

con1 ist der Container (der weiße Hintergrund zeigt die Größe/den Bereich des Containers). Dieser ist in der Höhe auf 250px beschränkt, aber der Text braucht von der Höhe her mehr als 250px. Wenn du height aus con1 entfernen würdest, würde sich die Box der Höhe, die der Text braucht, anpassen. Du könntest hierbei min-height verwenden, dadurch würde die Box immer eine Mindestgröße von 250px aufweisen, jedoch größer werden wenn der Text das verlangt.

[Bently.]

Danke euch