1

Consider the following fiddle: https://jsfiddle.net/7naxprzd/1/

Requirements are:

  • two columns with header and contents
  • tops of columns should align
  • bottom of columns should align
  • on top of each column there should be a horizontally centered arrow

The code is working properly if the arrows are eliminated by deleting the div with class .arrow-wrapper, but I need the arrows.

A solution could be to absolute position the arrow, but is there a way to solve this layout issue with flex without absolute positioning the arrow?

Should work for modern browsers and IE11.

.row-wrapper {
  display: flex;
}

.col-wrapper-outer {
  display: flex;
  flex-wrap: wrap;
}

.arrow-wrapper {
  width: 100%;
  text-align: center;
  font-size: 30px;
}

.col-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  color: white;
}

.col-wrapper .header {
  background: blue;
}

.col-wrapper .contents {
  flex: 1 0 auto;
  background: green;
}
<div class="row-wrapper">
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">Please align tops.</div>
      <div class="contents">Let me grow.</div>
    </div>
  </div>
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">please align tops.</div>
      <div class="contents">Let me grow.<br>Please<br>align<br>bottoms.</div>
    </div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Michiel
  • 160
  • 1
  • 2
  • 15

1 Answers1

1

In your div with class col-wrapper-outer, instead of this:

.col-wrapper-outer {
  display: flex;
  flex-wrap: wrap;
}

Use this:

.col-wrapper-outer {
  display: flex;
  flex-direction: column;
}

Then add flex: 1 to .col-wrapper so it takes the full height of the container.

revised fiddle

.row-wrapper {
  display: flex;
}

.col-wrapper-outer {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;    /* NEW */
}

.arrow-wrapper {
  width: 100%;
  text-align: center;
  font-size: 30px;
}

.col-wrapper {
  flex: 1;                   /* NEW */
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  color: white;
}

.col-wrapper .header {
  background: blue;
}

.col-wrapper .contents {
  flex: 1 0 auto;
  background: green;
}
<div class="row-wrapper">
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">Please align tops.</div>
      <div class="contents">Let me grow.</div>
    </div>
  </div>
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">please align tops.</div>
      <div class="contents">Let me grow.
        <br>Please
        <br>align
        <br>bottoms.</div>
    </div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Does the job in Chrome, but not in IE11. In IE11 the tops are aligned, but the bottoms are not (smaller column does not grow as the code dictates). – Michiel Oct 19 '17 at 12:55
  • Ah, yes. Good catch. The `flex` property has a rendering problem in IE. I've detailed the problem in [**this post**](https://stackoverflow.com/q/32239549/3597276). The solution, which works across browsers, is to use the longhand property `flex-grow` instead. https://jsfiddle.net/7naxprzd/3/ – Michael Benjamin Oct 19 '17 at 13:49