Wie stelle ich sicher, dass der Inhalt meines Flex Div in seinem Container bleibt?

Ich habe ein Flexbox Div mit 3 Elementen drin. Seine Richtung ist Spalte.Wie stelle ich sicher, dass der Inhalt meines Flex Div in seinem Container bleibt?

Die Flexbox Div hat keine Höhe, aber ihr Container hat eine maximale Höhe.

Die maxheight funktioniert für den Container, aber das mittlere Element in der Flexbox Div ist riesig und geht weit außerhalb der Grenzen des Containers.

Hier ist ein codepen mein Problem darstellt: http://codepen.io/jaman4dbz/pen/BWedNN

Sie werden sehen, der Körper eine berechnete Höhe von 600px hat oder so (je nach Fensterhöhe), während die App div waaaaay größer ist.

Das ultimative Ziel ist es, das große div den Inhalt des flex div zu strecken, bis es die maximale Höhe erreicht, und dann zu stoppen. Im Wesentlichen möchte ich, dass das mittlere große div reagiert.

* { box-sizing: border-box; } 
 

 
body { 
 
    height: 100vh; 
 
    margin: 0; 
 
    font-family: helvetica, arial, sans-serif; 
 
} 
 

 
.twocol { 
 
    display: flex; 
 
} 
 

 
.app { 
 
    height: auto; 
 
    width: 100%; 
 
    /* height: 100vh; */ 
 
    background: cadetblue; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    margin: auto; 
 
} 
 

 
/** 
 
* Note that this demo will actually work fine in IE10. This is because in IE10, flex-shrink is 0 instead of 1. See: https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed 
 
**/ 
 
.header { 
 
    width: 100%; 
 
    background: orchid; 
 
} 
 

 
/** 
 
* 1. IE needs display: block on the main element. 
 
* 2. IE10 sets flex-shrink to 0. This was originally according to spec, but has since changed. See: https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed 
 
**/ 
 
.main { 
 
    display: block; /* 1 */ 
 
    flex-grow: 1; 
 
    flex-shrink: 1; /* 2 */ 
 
    background: blanchedalmond; 
 
    overflow: auto; 
 
    padding: 0 20px; 
 
} 
 

 
.footer { 
 
    width: 100%; 
 
    background: coral; 
 
} 
 

 
h1 { font-size: 36px; } 
 
p { font-size: 16px; }

<body class="twocol"> 
 
    <div class="app"> 
 
     <header class="header"> 
 
      <p>Hello</p> 
 
     </header> 
 
     <main class="main"> 
 
      <h1>Cupcake ipsum dolor sit amet</h1> 
 
      <p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>  <p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>  <p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>  <p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>  <p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p> 
 
      <p>Liquorice candy canes cake. Gummies wafer tart topping pastry soufflé I love pie. Cake cookie croissant cupcake chocolate cake. Liquorice jelly beans pudding sugar plum biscuit fruitcake. Soufflé tootsie roll macaroon pudding. Chocolate cake cake sesame snaps sugar plum biscuit I love croissant icing. Caramels jelly dessert candy bonbon bear claw chocolate bar cheesecake icing. Toffee I love cake gingerbread jelly-o tootsie roll. Sesame snaps pie cupcake sweet. Croissant danish brownie gummies lollipop chupa chups gummies danish.</p> 
 
      <p>Chupa chups pudding topping caramels pie. Tart jujubes ice cream muffin sugar plum. Soufflé candy canes I love lollipop pastry brownie danish apple pie. Apple pie chupa chups biscuit chocolate bar I love muffin I love. Caramels cupcake I love sugar plum icing candy canes I love macaroon. Marzipan danish cheesecake marshmallow jelly. Jelly-o sugar plum liquorice donut I love pastry candy donut. I love gummi bears chocolate.</p> 
 
      <p>Gingerbread toffee pastry gingerbread I love toffee. Biscuit jelly wafer I love cheesecake candy canes chocolate cake. I love cake I love cotton candy muffin oat cake I love I love. I love bonbon macaroon toffee powder chupa chups cotton candy tootsie roll chocolate. Croissant dessert chocolate bar. Apple pie I love croissant sugar plum cotton candy I love. Candy canes jelly I love. Jelly beans cupcake brownie pudding lemon drops</p> 
 
      <p>Cheesecake macaroon toffee sesame snaps cotton candy cotton candy I love. Cake sugar plum sweet marshmallow I love. Soufflé liquorice ice cream candy canes I love tootsie roll marzipan biscuit jelly. I love I love tiramisu donut. I love bear claw pastry toffee. Cheesecake apple pie bonbon bear claw jelly-o topping tootsie roll chocolate bar. Cake bonbon toffee donut macaroon chocolate lemon drops gummies gummies. Jelly beans chocolate bar cotton candy halvah fruitcake.</p> 
 
     </main> 
 
     <footer class="footer"> 
 
      Goodbye 
 
     </footer> 
 
    </div> 
 
    <div>Col2</div> 
 
</body>

Quelle

2017-04-06 Jason McCarrell

Wenn etwas zu groß ist, um zu passen, überläuft es natürlich. Was soll es tun, wenn es die Frage ist? –

Warum nicht einfach 'height: 100vh' auf' .app' verwenden? Sie haben es auskommentiert, aber das löst das Problem. (Und übrigens brauchen Sie dann nicht 'height: 100vh' auf' body'.) –

Das Beispiel ist verwirrend. Ich habe einen besseren, den ich gemacht habe. Ich werde eine neue Frage mit dem besseren Beispiel posten. –

Mein Problem war ein Mangel, alle Formen der Höhe zu erben. Ich musste Höhe setzen: erben AND Max-Höhe: erben für jedes div zwischen meinem modalen und meinem großen div. Reagieren kann dich manchmal mit zusätzlichen Divs verbrennen.

Hier ist der endgültige Code Stift, das funktioniert: http://codepen.io/jaman4dbz/pen/LWozeZ

.unnecessary { 
    height: inherit; 
    max-height: inherit; 
} 

.allstuff { 
    display: flex; 
    height: inherit; 
    max-height: inherit; 
} 

.twocol { 
    display: flex; 
    flex-direction: column; 
}

EDIT: Diese Lösung kommt mit einem Vorbehalt. Sie können das div nicht mit einer Höhe füllen und Sie können keinen Rand für die unmittelbaren Kinder haben. Wenn du das tust, geht dein Kindelement gut über die Grenzen seines Elternteils hinaus, weil es dieselbe Höhe hat, obwohl es in einen kleineren Bereich gequetscht werden soll.

Quelle

2017-04-06 14:55:40

Es ist nicht wirklich ein Reaction-Problem. Die CSS-Eigenschaft 'height' erbt standardmäßig keine Werte. Siehe die Eigenschaft Definition in der Spezifikation: https://www.w3.org/TR/CSS22/visudet.html#the-height-property –

Es ist ein Reaktionsproblem durch Komponentendesign. React fügt die divs nicht ein, die Entwickler, weil jede Komponente ein containing-Element benötigt. Dies bedeutet, dass alle unsere gut geteilten Komponenten eine Menge divs verursachen und viele "erbte" Werte erfordern. –

Set html, body, .app { height: 100%; } (und entfernen Sie alle anderen Höheneinstellungen für diese Elemente). Es ist notwendig, html sowie die anderen beiden einzustellen.

Quelle

2017-04-06 13:39:47 Blazemonger

Das hat fast funktioniert! Hier ist das bessere Beispiel, mit dem ich arbeite. http://codepen.io/jaman4dbz/pen/GWaMZW Obwohl ich denke, ich werde meine Frage umschreiben, weil ich genauer weiß, was das Problem ist. –

Es ist mir nicht klar, was Sie noch tun wollen - Sie sind 'display: flex'ing Container mit nur einem Element in ihnen. Aber der neue Stift sieht besser aus, wenn Sie '.twocol {overflow: hidden; maximale Höhe: 100%; } ' – Blazemonger

ya, ich denke, das CSS für mein Hauptprojekt ist einfach kaputt. Mein neuester Code-Stift funktioniert so, wie ich es vorhabe: http://codepen.io/jaman4dbz/pen/LWozeZ Entschuldigung dafür, dass ich mit meiner Frage nicht nützlicher bin, aber seltsamerweise hast du mich zu einer Lösung durch die Höhe geführt: 100%. Ich werde versuchen, durch unseren Dschungel von Tausenden von Linien von Sass zu wühlen, um zu sehen, was die Stile bricht. Ich werde mit einer Lösung zurückkommen, die wahrscheinlich so spezifisch ist, dass sie für SO unbrauchbar ist. P –

Wie stelle ich sicher, dass der Inhalt meines Flex Div in seinem Container bleibt?

Antwort

Verwandte Themen