CODEWITHSUNDEEP
htmlcssflexbox
Xiaous
Xiaous

Reputation: 47

Nested flexbox grid not expanding

I am having difficulty making nested flexboxes expand to fill their parent cells size. The two subcells should grow to have a height of 1/3 their parent cell however they are taking up as little space as they can. I'd like to fix this but have no idea how to. 

<div class="grid">
<div class="cell blue">
    <p> This is a test grid, it is very tall <br> This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br> </p>
</div>
<div class="cell green">
    <p> This is also a test grid, equally tall</p>
</div>
<div class="cell subgrid red">
    <div class="subcell">
        <p>This is a subcell, it should take up 33% if</p>
    </div>
    <div class="subcell">
        <p>this is another subcell, should be small and vertical</p>
    </div>
    <div class="subcell deepgrid">
        <div class="deepcell">
            <p>deep grid 1</p>
        </div>
        <div class="deepcell">
            <p>Deep grid 2</p>
        </div>
        <div class="deepcell">
            <p>Deep grid 3</p>
        </div>
    </div>
</div>


.grid { display: flex; justify-content: center; text-align: center; }
.cell { flex: 1; }
.sub-grid { display: flex; }
.sub-cell { flex: 1 }
.deepgrid  {display: flex; }
.deepcell { flex: 1; }
.blue {background:blue;}
.green{background:green;}
.red{background:red;}

Upvotes: 0

Views: 170

Answers (1)

Oriol
Oriol

Reputation: 287960

The problem is that you used

.sub-grid { display: flex; }
.sub-cell { flex: 1 }

However, in the HTML, you used the classes subgrid and subcell.

Moreover, you should also add flex-direction to arrange the subcells in a column.

Therefore, you should use

.subgrid {
  display: flex;
  flex-direction: column;
}
.subcell {
  flex: 1;
}


.grid {
  display: flex;
  justify-content: center;
  text-align: center;
}
.cell {
  flex: 1;
}
.subgrid {
  display: flex;
  flex-direction: column;
}
.subcell {
  flex: 1
}
.deepgrid {
  display: flex;
}
.deepcell {
  flex: 1;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.red {
  background: red;
}
<div class="grid">
  <div class="cell blue">
    <p>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>
    </p>
  </div>
  <div class="cell green">
    <p>This is also a test grid, equally tall</p>
  </div>
  <div class="cell subgrid red">
    <div class="subcell">
      <p>This is a subcell, it should take up 33% if</p>
    </div>
    <div class="subcell">
      <p>this is another subcell, should be small and vertical</p>
    </div>
    <div class="subcell deepgrid">
      <div class="deepcell">
        <p>deep grid 1</p>
      </div>
      <div class="deepcell">
        <p>Deep grid 2</p>
      </div>
      <div class="deepcell">
        <p>Deep grid 3</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions