CODEWITHSUNDEEP
htmlcssflexbox
Oscar
Oscar

Reputation: 1147

How to stretch an element of a flexbox?

This is what I have achieved: enter image description here

And this is what I´m trying to complete. I´m struggling in the third column (it´s missing two things: the background-color (which is gray, it should fill the white space) and the dots justify in the middle of the column).

enter image description here

I´m not sure what I´m missing. This is my current code:

HTML Code

You have 4 items in your cart

<article class="cart-item">
    <div class="left">
        <img src="images/item1.jpg"></img>
    </div>

    <div class="center">
        <h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
        <span class="description">Shipping 3-day with UPS</span>
        <span class="description">Color: Gray</span>
        <span class="description">Size: 28.5</span>
        <span class="price">$60.00</span>
    </div>

    <div class="right">
        <div class="grouped-dots">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</article>

CSS Code

.cart-item {
    height:100%;
    overflow: hidden;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.left, .center {
    padding-top: 10px;
    padding-bottom: 10px;
}

.left {
    flex: 0 0 33.33%;
    padding-left: 15px;
    padding-right: 15px;
}

.left img {
    max-width: 100%;
}

.center {
    flex: 1 0 0;
    padding-right: 15px;
}

.right {
    flex: 0 0 15px;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
}

.right .grouped-dots {
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    background-color: #F5F5F5;
    flex-direction: column;
    justify-content: center;
}

.cart-item .grouped-dots span::after {
    content: '.';
    font-size: 40px;
    font-family: 'Open Sans', sans-serif;
    color: #CCCCCC;
    line-height: 0px;
}

Upvotes: 0

Views: 132

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371033

Step 1: Add display: flex to .right. This will cause the background color to stretch the full height of the column.

.right {
    display: flex; /* NEW */
    flex: 0 0 15px;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
}

Step 2: Add display: flex to .grouped-dots (otherwise flex-direction: column and justify-content: center won't work).

.right .grouped-dots {
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    background-color: #F5F5F5;
    display: flex; /* NEW */
    flex-direction: column;
    justify-content: center;
}

DEMO

Upvotes: 2

Related Questions