Flexbox - first column full height

Question

How can I make the first .item (green box) 100% height ?

* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.item {
border: 1px solid red;
background: #8282e0;
width: 50%;
}
.item:nth-child(1) {
background: #a6f7a6;
height: 100%;
}
.item:nth-child(3) {
margin-left: 50%;
}

<div class="wrap">
  <div class="item">
<h3>Item Title</h3>
  </div>
  <div class="item">
<h3>Item Title</h3>
  </div>
  <div class="item">
<h3>Item Title</h3>
  </div>
</div>

Codepen - https://codepen.io/afelixj/pen/eavVJw

Flexbox isn't going to be able to do this without changing your markup. As @JoeB. says, grid can do this. — ray, May 16 '19 at 05:27
you can't do that when a flexbox *wraps*. CSS grids do better.. a similar requirement [here](https://stackoverflow.com/questions/55604932/ordering-flex-items) but along with ordering too — kukkuz, May 16 '19 at 05:38
There is no need of all this css to get this result, just change the structure and remove all the CSS, Check my answer bewlow — Atul Rajput, May 16 '19 at 05:59

ganjim · Answer 1 · 2019-05-16T11:22:10.463

This is how I would do it (I don't know a way to make it work if you need to put the three headers exactly under each other, like rendering them with a for loop)

* {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex: 1;
}

.itemCont {
  display: flex;
  background: #8282e0;
  flex: 1;
  flex-direction: column;
}

.item {
  display: flex;
  border: 1px solid red;
  background: #5691f3;
  flex: 1;
}

<div class="wrap">
  <div class="itemCont">
    <div class="item">
      <h3>Item Title</h3>
    </div>
  </div>
  <div class="itemCont">
    <div class="item">
      <h3>Item Title</h3>
    </div>
    <div class="item">
      <h3>Item Title</h3>
    </div>
  </div>
</div>

score 1 · Answer 2 · answered May 16 '19 at 05:31

1

This can be achieved by changing flex-direction to column and applying a fixed height to .wrap

* {
    box-sizing: border-box;
}
.wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 123px;
}
.item {
    border: 1px solid red;
    background: #8282e0;
    width: 50%;
}
.item:nth-child(1) {
    background: #a6f7a6;
    height: 100%;
}

<div class="wrap">
  <div class="item">
<h3>Item Title</h3>
  </div>
  <div class="item">
<h3>Item Title</h3>
  </div>
  <div class="item">
<h3>Item Title</h3>
  </div>
</div>

answered May 16 '19 at 05:31

AlliterativeAlice

11,841
9
52
69

1

whats the use of `flex` if you are doing it this way. This can be acheived without flex. Try `float:left` to `.item`. – manish kumar May 16 '19 at 05:40
you have given static height to 1st item you didn't mention that in the description and what is the content in item2 or item 3 is increased.. will it take the height? – Xenio Gracias May 16 '19 at 05:41
better to use grid. – Xenio Gracias May 16 '19 at 05:41
I agree it's better to use grid but the question is how to do it in flexbox so that's my answer. – AlliterativeAlice May 16 '19 at 05:43
You didnt use the `flex` . if you are still playing with width. Read this https://developer.mozilla.org/en/docs/Web/CSS/flex – manish kumar May 16 '19 at 05:51
I have achieved the same result by Flex by just changing some code structure only. Check my answer below – Atul Rajput May 16 '19 at 06:07

score 1 · Answer 3 · answered May 16 '19 at 05:50

* {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
}

.item {
  border: 1px solid red;
  background: #8282e0;
  flex:1;
}

.item-inner {
  flex: 1;
  justify-content:center;
  height:100px;
}
.wrap-inner{
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
}
.item:nth-child(1) {
  background: #a6f7a6;
  height: 200px;
}

.item:nth-child(3) {
  margin-left: 50%;
}

<div class="wrap">
  <div class="item item-outer">
    <h3>Item Title</h3>
  </div>
  <div class="item wrap-inner">
    <div class="item-inner">
      <h3>Item Title</h3>
    </div>
    <div class="item-inner">
      <h3>Item Title</h3>
    </div>
  </div>
</div>

This would be apt use of flex property and altering the height.

You code have extra HTML and CSS, although this result doesn't need so much HTML at least, Check my answer — Atul Rajput, May 16 '19 at 06:09

score 1 · Answer 4 · answered May 16 '19 at 06:02

There is no need of the extra CSS, just change the structure and Give background colors as per your need.

* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.item {
border: 1px solid red;background: #8282e0;
}
.wrap > .item{width: 50%;}

<div class="wrap">
  <div class="item">
    <h3>Item Title</h3>
  </div>
  <div class="item">
  <div class="item">
    <h3>Item Title</h3>
  </div>
  <div class="item">
    <h3>Item Title</h3>
  </div>
  </div>
</div>

Flexbox - first column full height

4 Answers4