CODEWITHSUNDEEP
htmlcssflexbox
Omnomnious
Omnomnious

Reputation: 345

How to give flexbox items the same height as parent element?

I've been searching online for a while and can't seem to find a solution to this problem. Maybe I'm just confused.

Given the following css, how would one go about vertically centering the text inside each of the colored boxes without changing the vertical height of boxes. If you use "align-items: center;" you shrink the boxes down to the size of the font.

The reason I need to figure this out is because I have the following code:

    <div class="navigationBar">
        <div class="centeringContainer">

            <div class="myName">
                John Smith
            </div>


            <div class="centeringContainerTwo">
                <div class="spacer">
                </div>

                <nav class ="navigation">
                    <ul>
                        <li class="linkOne"><a href = "">Link 1</a></li>
                        <li class="linkTwo"><a href = "">Link 2</a></li>
                        <li class="linkThree"><a href = "">Link 3</a></li>
                        <li class="linkFour"><a href = "">Link 4</a></li>
                    </ul>
                </nav>


                <div class="spacer">
                </div>
                <div class="spacer">
                </div>

            </div>

        </div>

    </div>

You can see the accompanying css here:

http://codepen.io/omnomnious/pen/wgzvPv

I want the buttons on the right side of the screen (which have been colored bright blue just to distinguish them), to have the same height as the navigation bar regardless of the viewport size and also have the text vertically centered. That way when I hover over the link, the entire section of the navigation bar which the link covers changes color, instead of just the small box. I would really appreciate any help and feedback on whether or not I'm using flexboxes correctly and if I have bad practice.

Thanks!

Upvotes: 2

Views: 3570

Answers (2)

Asons
Asons

Reputation: 87303

If you add a height to these rules/elements, and give the anchors display: flex; align-items: center; justify-content: center; to center its text vertical/horizontal

In general, when one use percent on height, a child's parent also need a height, and if nested, its parent, and so on

Updated codepen

.navigation ul{
    list-style-type: none;
    display: flex;

    height: 100%;            /*  added property  */
    margin: 0;               /*  added property  */
}

.navigation li{
    flex-grow:1;
    flex-basis:0;

    font-family: 'Open Sans', sans-serif;
    text-align: center;
    font-size: 1vw;

    height: 100%;            /*  added property  */
}

.navigation a{
    display: block;
    color: var(--colorTwo);
    background: deepskyblue;

    height: 100%;            /*  added property  */
    display: flex;           /*  added property - center text vertically  */
    align-items: center;     /*  added property - center text vertically  */
    justify-content: center; /*  added property - center text vertically  */
}

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 372059

One quick solution is to wrap the anchor text in a span element:

<li class="linkOne">
     <a href = "">
        <span>Link 1</span>
     </a>
</li>

revised codepen

You need to give all parent elements in the nav bar full height. This is achieved by giving each parent display: flex. By making an element a flex container it automatically applies full height to the child (align-items: stretch).

The anchor element cannot be both vertically centered and full height. It has to be either one or the other. By wrapping the anchor text in a span, you can make the anchor element full height, then vertically center the span.

Upvotes: 2

Related Questions