CSS Flexbox - First child to be equal height

Question

What I am trying to achieve is when the layout breaks down to mobile the image block matches the same height as the title/content blocks.

The layout is quite tricky, it works as expected on desktop view with the title block being at the top full width. I think the issue is using flex-wrap: wrap on the mobile view? (I have got this layout working using CSS grid but unfortunately it cannot be used on production)

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
}

.title {
  background: tomato;
  width: 50%;
}

.image {
  background: cornflowerblue;
  width: 50%;
  height: 150px;
}

.content {
  background: gold;
  width: 50%;
}

<div class="wrapper">
  <div class="image">img</div>
  <div class="title">title</div>
  <div class="content">content</div>
</div>

http://jsfiddle.net/8dvhew3q/4/

"*[It's] working using CSS grid but unfortunately it cannot be used on production*" - why? — David Thomas, Dec 19 '18 at 12:39
Have to support older browsers, and autoprefixer doesn't solve the display issues on them — NoDachi, Dec 19 '18 at 12:42
Essentially, not possible with flexbox and the current structure. — Paulie_D, Dec 19 '18 at 12:53
Perhaps - https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css — Paulie_D, Dec 19 '18 at 12:54
Ah I see thanks anyway! I may have to duplicate the title inside the content block as a work around — NoDachi, Dec 19 '18 at 13:17

score -2 · Answer 1 · answered Dec 19 '18 at 13:03

use this code

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
}

.title,
.image,
.content {
  width: 50%;
}

.title {
  background: tomato;
}

.image {
  background: cornflowerblue;
}

.content {
  background: gold;
}

@media only screen and (min-width: 800px) {
  .title {
    width: 100%;
    order: 1;
  }

  .image {
    order: 2;
    height: 150px;
  }

  .content {
    order: 3;
  }
}

CSS Flexbox - First child to be equal height

1 Answers1