Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox: align-items and flex-basis seem to be cancelling each other out

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #257564
    [email protected]
    Participant

    Hey folks,
    I love this site, but this is my first post. I am trying to get a row of items to be the same height regardless of content (align-items:stretch) and the same width regardless of content (flex-basis:0). My problem is that it looks like I can’t have both: when I leave flex-basis:0 in place, the items do not stretch vertically. When I take it away the items stretch, but (obviously) they are no longer the same width. What do I do?

    I have attached a Codepen: https://codepen.io/anon/pen/yoXMdE

    #257565
    Beverleyh
    Participant

    Things seem to be working as expected https://codepen.io/anon/pen/eERRyB but remember that the immediate children of a flex parent are the ones affected; the .buttonItem elements in the case of your demo, which I’ve coloured for easier visuals (alternate teal and tomato).

    Your burgundy .btn elements are nested one deeper so are beyond the scope of this flex context.

    #259335
    [email protected]
    Participant

    You are absolutely right! The div elements are doing what they’re supposed to, it’s the a elements that aren’t filling the space. And here I was, bad-mouthing those innocent divs.

    I know this is lame, but is there any way to get an a element to fill its container? I realize that there probably isn’t, that I will probably have to simply put all my styles on the divs as you have done in your codepen, but if there’s a way for me to NOT have to do so that would be ideal. If not, c’est la vie.

    #259337
    Beverleyh
    Participant

    You can make .buttonItem a flex parent too along with its existing styles (an element can be both a flex parent and a flex child at the same time) and make .btn 100% wide.

    Here’s the full flex guide for reference https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.