The Wrap Force Trick

Note that the centering of the <a> tags text requires some consideration.
As you might know, the a element itself is display: inline by CSS standard default.

Usage with flex-direction: row

Usage with flex-direction: column

A common addition to the CSS awesomeness is that flex containers are not responsive to relative or unset heights of their flex-items when it comes to flex-direction: column. So, just by changing the flow-direction in the above example from flex-direction: row to flex-direction: column, gives a somewhat unexpected visual result: All flex-items are aligned in one long, single column from top to bottom. The Wrap Force Trick does not work.

Problem is that any not-set height, either by an absolute or relative value, anywhere along any of our flex-break's static positioned ancestors right back to (and including) the body and html element, will make the flex-break height go 0.

On fix to that problem is to provide every ancestor with a relative height of 100%.

html,
body {
  height: 100%;
}
...
section.list-index {
  ...
  flex-flow: column wrap;
  ...
  height: 100%;
}

<html...>
  <body>
  <section class="list-index">
     ...
     <div class="flex-break"></div>
  </section>
  <body>
</html>

Alternative Fixes

Alternatives that might be fixes; have to be evaluated

  • absolute-relative top-left whatever 0
  • table

Alternative Fixes that did not work

  • Setting min-height: 100%; on section.list-index

results matching ""

    No results matching ""