Forums

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

Home Forums CSS Getting flexboxes to fill verticle space

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #241054
    amidigital
    Participant

    I would like the Announcements and Latest News boxes to extend down so that they are equal with the sidebar.

    The mainContent div is doing its job of extending all the way down. But inside it, the div .blogHolder is not filling the vertical space.

    http://www.aaronheine.com/blackboard

    Thanks

    #241059
    Paulie_D
    Member

    Any chance of a minimal demo in Codepen.io?

    Debugging layout via Developer Tools is not ideal.

    #241060
    amidigital
    Participant
    #241061
    Paulie_D
    Member

    My first glance at the site on my laptop tells me you have some other issues.

    WTF is this?

    .navBG {
        width: 5000px; /* really */
        margin: 0 auto;
        z-index: 1;
        background-color: #990000;
        height: 42px;
        margin-left: -2000px; /* huh? */
        position: relative;
        top: 99px;
    }
    
    #241063
    Paulie_D
    Member

    Dude….not the WHOLE page…a minimal structure demo.

    #241064
    Paulie_D
    Member

    Looks to me as though the ‘blogholder’…that’s the section below the slider…right? is fine.

    I think we need to see what you’re seeing compared to how you think this should look. Could you post screenshots?

    Oh…and in which browser?

    #241065
    amidigital
    Participant

    I’m on Chrome. Here is a screen shot of what I’m looking for. http://i.imgur.com/eqaBoew.png

    #241066
    amidigital
    Participant

    See how the mainContent is extending to the bottom as it should… http://i.imgur.com/8Dnlf0k.png

    I just need the two white boxes to extend down as well.

    #241067
    Paulie_D
    Member

    That’s because that .mainContent div wasn’t using flexbox…

    It wasn’t set to display:flex and then it need to be a column

    .mainContent {
        flex: 1 75%;
        background: black;
        order: 1;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    

    Sorted!

    #241068
    amidigital
    Participant

    I tried that with your code.
    http://codepen.io/AmIDigital/pen/reqGgg?editors=1100

    Did you try resizing the browser window? Not lined up :(

    Maybe the photo gallery on top is complicating things.

    #241088
    amidigital
    Participant

    I was able to fill that space by applying flex-grow: 1;

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