100% width & height Anchor inside flexbox for Webkit Browsers

Question

I need to create a 100% width & height link inside of a flexbox. This does render successfully in Firefox, IE11, but not webkit browsers like Chrome. Webkit expands the width, but does NOT expand to 100% height. In this scenario, it is only the height of the one line of text. Firefox and IE11 do expand the anchor the the full height of the list-item.

Here is the CSS:

.height-100vh  {
     height: 100vh;
}

ul.flex-column  {
     padding: 0;
     margin: 0;
}

ul.flex-column li  {
     list-style: none;
}

.flex-column  {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-flex-flow: column wrap;
     -ms-flex-flow: column wrap;
     flex-flow: column wrap;
}

.flex-cell  {
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     -moz-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
}

.flex-full  {
     width: 100%;
     height: 100%;
}

.full-anchor {
    display:block;
    width: 100%;
    height: 100%;
    background: #000;
    color: #FFF;
}

and the HTML:

<body class="height-100vh">

    <ul class="flex-column flex-full">
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
    </ul>

</body>

Are there potentially some prefixes that I am not using? I am using autoprefixr. Also to note: I'm using normalize.css.

Cascade Cascade · Accepted Answer · 2014-11-14T20:18:01

The updated flexbox standard is still newish (Chrome 29 began supporting it without prefixes mid 2013), so maybe Webkit is interpreting the spec in a slightly different way - or there could still be bugs to work out.

Adding a visible border to the .flex-cell CSS confirms that the li elements are expanding, it's just the a elements that aren't: http://jsfiddle.net/w8a3rpus/66/

I've removed the -prefixes for simplicity, but you'll need the -webkit one for Safari 8: http://caniuse.com/#search=flexbox

While playing around with this I stumbled across this question, which although not related to lists or anchors, seems like David Storey's thinking could apply here too. Basically, since your li part expands without specifying 100% anywhere, a solution would be to make each li into a flex-box too, and give the anchors a flex value of 1:

.flex-cell  {
    display: flex;
    flex: 1;
}

.full-anchor {
    flex: 1;
    background: rgba(0,0,0,0.25);
    color: #FFF;
}

http://jsfiddle.net/w8a3rpus/68/

100% width & height Anchor inside flexbox for Webkit Browsers

1 Answers