Как растянуть элемент flexbox?

Question

Это то, что я достиг:

И это то, что я пытаюсь выполнить. Я борюсь в третьем столбце (у него две вещи: фоновый цвет (серый, он должен заполнить пробел), а точки - в середине столбца).

I'm не уверен, что отсутствует I'm. Это мой текущий код:

HTML код

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 код

.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; 
} 

Answer 1

Шаг 1: Добавить display: flex в .right. Это приведет к тому, что цвет фона увеличит всю высоту столбца.

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

Шаг 2: Добавить display: flex в .grouped-dots (иначе flex-direction: column и justify-content: center не будет работать).

.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