如何将flexbox与锚定列一起使用

Question

I'm using display:flex in order to have same height of child's columns.

Everything works well when col-... is immediate child of display:flex parent:

<div class="container flex">

    <div class="col-sm-4 flex-col">
      jkkfjds<br>dsfjdk<br>fdsfk
    </div>



    <div class="col-sm-6 flex-col">
      jfkdjkfsdjk
    </div>
</div>

.flex {
  display:flex;
}

.flex-col {
  border:1px solid black;
}

However I want flex-col to be anchored. When I try to add <a> as a parent of <div class="col-sm-4 flex-col"> it all breaks down like this:

http://www.bootply.com/C8SmhEmvGS

I've already tried setting display:block to <a> but it didn't help.

Answer 1

Add col-sm-4 flex-col class to a instead of div .

<div class="container flex">
  <a href="#" class="col-sm-4 flex-col">
    <div >
      jkkfjds<br>dsfjdk<br>fdsfk
    </div>
  </a>

  <a href="#" class="col-sm-6 flex-col">
    <div >
      jfkdjkfsdjk
    </div>
  </a>
 </div>

Working bootply