2

I'm using the framework basscss that supports flexbox. Having some issues regarding equal/stretch heights.

<div class="flex mb2">
    <div class="flex flex-wrap col col-4">
      <div class="flex flex-wrap col-12">
        <div class="self-start col-12 border">A1</div>
        <div class="flex col-12 border py2">A2</div>
      </div>
    </div>
    <div class="flex flex-wrap col col-4">
      <div class="flex flex-wrap col-12">
        <div class="self-start col-12 border">B1</div>
        <div class="flex col-12 border py3">B2</div>
      </div>
    </div>
    <div class="flex flex-wrap col col-4">
      <div class="flex flex-wrap col-12">
        <div class="self-start col-12 border">C1</div>
        <div class="flex col-12 border py4">C2</div>
      </div>
    </div>
  </div>

https://jsfiddle.net/dcy15y3r/

How can I make all A heights exactly the same, and the B heights to fill the remaining space?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
PJH
  • 41
  • 4
  • I think you're bumping up against two issues here: (1) [Flexbox is not a grid system](http://stackoverflow.com/q/34480760/3597276), and (2) [Equal heights don't apply to flex items on different lines](http://stackoverflow.com/q/36004926/3597276). – Michael Benjamin Jun 08 '16 at 14:21

0 Answers0