Forums

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

Home Forums CSS Equal fluid heights with flexbox

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #189896
    sjoerdth
    Participant

    Example code here

    Now, I want something which I’m pretty sure should be possible with flexbox, but somehow I can’t seem to get it right.

    If you look at the example you’ll see a red area which contains a list, now I want the list-items to be the same height without defining an actual height. So they all should be as high as the highest list-item, in this case the green second list-item.

    I’ve already checked a number of tutorials, but I can’t work it out.

    #189921
    Paulie_D
    Member

    Please do not post embedded codepens with alerts.

    Also, this is a question on Flexbox…not javascript.

    #189922
    Paulie_D
    Member
    #189923
    Paulie_D
    Member

    Of course, you don’t need flexbox to do that.

    CSS-Table layouts work too.

    #189980
    sjoerdth
    Participant

    @siva Thanks for the input, but I wasn’t looking for a JS solution, also that script is very specific so if I was going for a JS solution I wouldn’t do it like that.

    @Paul_D I know it can be easily achieved by using table and table-cell, but I was specifically experimenting with flexbox, getting to know the ins and outs.

    Now your example works and I already stumbled upon the tutorial you linked, but it breaks when you vertically center the list with justify-content: center and I don’t get why. Also, I don’t want them to fill up the parent completely height-wise.

    Maybe I just want something of flexbox where I should be using table display instead, but the reason I would like to know if this is possible is because with responsive layouts tables can be a bit of hassle. With flexbox the base of your styling can stay the same, so that’s a bit nicer. And it seems it can be done, just not when vertically centered.

    #189986
    Paulie_D
    Member

    it breaks when you vertically center the list with justify-content: center and I don’t get why. Also, I don’t want them to fill up the parent completely height-wise.

    I suspect you’re looking for flexbox to do too much here. If you don’t want the list items to fill the parent ul (although I can’t think why), you can add margins.

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