flexbox vertically split container in HALF

Question

Can anyone tell how can I make right top container and right bottom container to have the same height and to split the red container 50-50% vertically. No matter what is the content inside. I tried stretching content and have them wrapped while keeping flex-direction: row to keep same height for items but I'm lost.

What I expect: right top container grows the same height as right bottom which also results the left container growing automatically of course.

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>

Basically, you can't...that's not the way flexbox works. You can make the boxes *initially* the [**same size**](http://codepen.io/Paulie-D/pen/xVYyvy) but once content is added then the *flexy* part of flexbox comes into place. — Paulie_D, Apr 12 '16 at 09:16

Felipe · Answer 1 · 2017-09-08T19:59:16.577

27

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

I've cleaned up the example fiddle and removed non-essential css styles to show which flex properties are being used here.

In order to get evenly spaced top/bottom divs, you need to either specify the proper value for flex-basis, or let flex work itself out. Assuming that the parent's display is set to flex with a column orientation, the combined flex style can get us there easily:

.half-containers {
    flex: 1;
}

see more on flex styling and the flex-basis property

edited Sep 08 '17 at 19:59

answered Sep 08 '17 at 19:53

Felipe

10,606
5
40
57

should be the answer – BoundForGlory Aug 07 '19 at 22:31
3

The `overflow: auto` appears to be critical in getting this working. – edA-qa mort-ora-y May 17 '20 at 20:25
Ooo, I like this. Places nice with `gap` too. – hello_luke Aug 18 '22 at 02:13

score 13 · Accepted Answer · edited May 23 '17 at 10:29

13

Intuitively one would expect that this would work just with a flex-direction: column for the main container and the left container's height set to 100%.

Instead all browser do this: (this is a quote from another stackoverflow question)

How is it possible that all major browsers got the flex container to expand on wrap in row-direction but not in column-direction?

So what you can do is wrap the two right containers into 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 a jsfiddle as an example how you could style it for the expected result.

In this example the 'main-container' is set to 50% width and 75% height of the body.

edited May 23 '17 at 10:29

Community

1
1

answered Apr 12 '16 at 10:28

michaPau

1,598
18
24

Thanks, but it behaves the same as my example. Add some more text into one of the containers on right. It'll loose 50/50% distribution – zsitro Apr 12 '16 at 10:48
Setting the max-height: 50% for the half-containers works in Firefox but not in Chrome. Another approach is to set the direction for the right container to rows with item widths of 100%, wrap them and explicitly setting every height to 50%. I updated the fiddle above. It works in Firefox, Chrome and IE. (IE needs max-width on every item - in case you wonder why it's there) – michaPau Apr 12 '16 at 12:06

serverpunk · Answer 3 · 2018-02-04T20:37:43.397

Building on Felipe's answer, here is an even more minimal example of how to split a single flex container in half vertically. Each of these styles has been confirmed to be significant and necessary, except for the two at the bottom marked optional.

(What got me was that every parent element needs to have a height: 100% set, 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 CodePen here:

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

this doesn't work when you add more contents to one of divs, see https://codepen.io/anon/pen/Kxemog — zupa, Sep 13 '18 at 15:04

score 0 · Answer 4 · answered Jun 16 '22 at 13:57

we can use flexbox concepts to split equally between two div with the parent in the following way

* {
    width: auto;
    height: 100%;
 }
.row {
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
  }

  .col {
    flex: 1;
    margin: 5px;
    border: solid;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
<title>Other page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
  </head>
  <body>
<div class="row">
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae
    expedita ipsum nobis praesentium velit animi minus amet perspiciatis
    laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
  </div>
</div>
  </body>
</html>

flexbox vertically split container in HALF

4 Answers4

Linked