Geek Answers Handbook

Flexbox container with vertical separation in HALF

Can someone tell me how I can make the container in the upper right and in the lower right container with the same height and divide the red container by 50-50% vertically. No matter what is inside. I tried stretching the contents and wrapping them while keeping the flex-direction: row the same height for the elements, but I'm lost.

What I expect: the top right container grows with the same height as the bottom right , which also automatically increases the left container. problem

This is what I have so far: http://jsbin.com/rozoxoneki/edit?html,css,output

 .flex{ display: flex; border: 5px solid red; &-child{ background: green; border: 2px solid yellow; flex: 1; } } .flex--vertical{ flex-direction: row; flex-wrap: wrap; > .flex-child{ min-width: 100%; } } <div class="flex"> <div class="flex-child"> left </div> <div class="flex-child flex flex--vertical"> <div class="flex-child"> <h1>right top</h1> </div> <div class="flex-child"> <h1>right bottom</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p> </div> </div> </div>
+6
source share
3 answers

One would intuitively expect this to work only with flex-direction: column for the main container, and the height of the left container is 100%.

Instead, the browser does the following: (this is a quote from another question fooobar.com/questions/23695 / ... )

How is it possible that all major browsers got the flex container to expand onto the wrapper in the row direction, but not in the column direction?

So what you can do is wrap the two correct containers in a new one:

Like this HTML schema:

 <div class="main-container"> <div class="left-container">Left container</div> <div class="right-container"> <div class="half-containers">Top right</div> <div class="half-containers">Bottom right</div> </div> </div>

Here is jsfiddle as an example of how you could style it for the expected result.

In this example, the “main container” is set to 50% of the width and 75% of the body height.

+5
source

The accepted answer is not ideal for using flex properties, because all this can be done without the need for min-height or max-height

I cleaned up the sample script and removed the non-essential CSS styles to show which flex properties are used here.

To get evenly distributed upper / lower divs, you need to either specify the correct value for the flex-basis , or let flex work on its own. Assuming the parent display is configured for flexibility with column orientation, the combined flex style can easily find us:

 .half-containers { flex: 1; }

more on flex style> and the flex-basis property

+4
source

Based on Felipe's answer, here is an even more minimal example of how to split one flexible container halfway vertically. It was confirmed that each of these styles is significant and necessary, with the exception of the two lower marked optional .

(I realized that every parent should have a height: 100% , or the whole thing breaks.)

HTML

 <div id="container"> <div class="row">This is the top.</div> <div class="row">This is the bottom.</div> </div>

CSS

 html, body { height: 100%; } #container { display: flex; flex-direction: column; height: 100%; } .row { flex: 1; } /* optional: get rid of body margin. makes look nice. */ body { margin: 0; } /* optional: shade the bottom row */ .row:nth-child(2) { background: #bbb }

Working code: here

https://codepen.io/rbrtmrtn/pen/NyxeJE

0
source

More articles:


All Articles