CODEWITHSUNDEEP
cssflexbox
user3792705
user3792705

Reputation: 617

How to use nested flexbox to make grid

First I use flexbox to divide left/right 50 by 50. Then I want to use same method to divide right side 50% on top, 50% at bottom. But, it does not work as show by red border.

I want to use nested flexbox to make right side evenly divided (red). But, it does not work

What's wrong?

https://jsfiddle.net/1zrxohj8/1/

HTML:

<div id="container">


<div class="split-h">
  <div class="debug flex-col left">

  </div>
  <div class="debug flex-col right">


        <div class="split-v">
          <div class="debug flex-row top">

          </div>
          <div class="debug flex-row bottom">

          </div>
        </div>

  </div>
</div>


</div>

CSS:

#container {
  height: 300px;
  width: 300px;
}
.split-h {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.split-h > .debug {
  border: 1px dotted grey;
}

.split-h > .flex-col {
  flex: 1;
  overflow: auto;
  height: 100%
}



.split-v {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}

.split-v > .debug {
  border: 1px dotted red;
}

.split-v > .flex-row {
  overflow: auto;
  width: 100%
}

.split-v > .top {

}

Upvotes: 0

Views: 321

Answers (2)

Nitheesh
Nitheesh

Reputation: 20016

What you are missing is flex: 1 or flex-grow: 1 in .split-v > .flex-row which will fit div in its content. 

#container {
  height: 300px;
  width: 300px;
}
.split-h {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.split-h > .debug {
  border: 1px dotted grey;
}

.split-h > .flex-col {
  flex: 1;
  height: 100%
}

.split-v {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}

.split-v > .debug {
  border: 1px dotted red;
}

.split-v > .flex-row {
  overflow: auto;
  width: 100%;
  flex: 1;
}
<div id="container">
  <div class="split-h">
    <div class="debug flex-col left">
    </div>
    <div class="debug flex-col right split-v">
      <div class="split-v">
        <div class="debug flex-row top">
        </div>
        <div class="debug flex-row bottom">
        </div>
      </div>
    </div>
  </div>
</div>

Edit: Some of the CSS properties is not required in the implementation. have commented out them and have added the reason for that.

#container {
  height: 300px;
  width: 300px;
}
.split-h {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.split-h > .debug {
  border: 1px dotted grey;
}

.split-h > .flex-col {
  flex: 1;
  /* height: 100% Reason:- No need since the parent class has flex-direction as row and a height value, the content will be fit in height on providing flex: 1*/ 
}

.split-v {
  display: flex;
  flex-direction: column;
  /* width: 100%; Reason:- Since the parent class split-h has flex display and flex-direction row, contents will be split equally*/
  flex: 1;
}

.split-v > .debug {
  border: 1px dotted red;
}

.split-v > .flex-row {
  overflow: auto;
  /* width: 100%; Reason:- Flex wiill handle this automatically.*/
  flex: 1;
}
<div id="container">
  <div class="split-h">
    <div class="debug flex-col left">
    </div>
    <div class="debug flex-col right split-v">
      <!-- <div class="split-v">  This is not required since the flex direction is handled in the parent layer -->
        <div class="debug flex-row top">
        </div>
        <div class="debug flex-row bottom">
        </div>
      <!-- </div> -->
    </div>
  </div>
</div>

Upvotes: 1

Wilson
Wilson

Reputation: 9136

RESULT

enter image description here

HTML

<div class="container">
  <div class="left-side">
    Left
  </div>

  <div class="right-side">
    <div class="top-right-side">
      Top Right
    </div>

    <div class="bottom-right-side">
      Bottom Right
    </div>
  </div>
</div>

CSS

.container {
  height: 100px;

  display: flex;     
}

.left-side {
/*   Fill left side 50% */
  flex-grow: 1;
}

.right-side {
/*   Fill right side 50% */
  flex-grow: 1;

  display: flex; 
  flex-direction: column
}

.top-right-side {
/*   Fill top right side 50% */
  flex-grow: 1;
}

.bottom-right-side {
/*   Fill right bottom side 50% */
  flex-grow: 1;
}

DEMO

https://codepen.io/wilsonbalderrama/pen/ZEYpYjg?editors=1100

Upvotes: 1

Related Questions