Как растянуть гибкий ребенок, чтобы цвет фона соответствовал высоте родственного брата

Question

У меня есть две ссылки в li, одна с текстом, которая может быть короткой или длинной, а другая - значком. Значок background-color значка должен соответствовать высоте текстовой ссылки, в то время как текст должен иметь заданное дополнение. Это не должно быть flexbox, я просто подумал, что это должно быть проще.

http://codepen.io/anon/pen/GrQZKN

li { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    .first { 
    background-color: #333; 
    padding: 20px; 
    color: #fff; 
    flex: 1; 
    } 
    .second { 
    background-color: orange; 
    align-items: stretch; 
    display: flex; 
    } 
} 

<ul> 
    <li> 
    <a href="#" class="first">Link</a> 
    <a href="#" class="second">(icon)</a> 
    </li> 
    <li> 
    <a href="#" class="first">Longer LongerLonger Longer link</a> 
    <a href="#" class="second">(icon)</a> 
    </li> 
</ul> 

Answer 1

Вы можете просто сделать ниже:

1. Удалить align-items: center из li (для растяженияsecond)

2. Заменить align-items: stretch с align-items: center в li.second (для вертикального выравнивания)

Смотрите демонстрационный ниже:

body { 
 
    max-width: 300px; 
 
    background-color: #ddd; 
 
} 
 

 
li { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    /*align-items: center;*/ 
 
    border-bottom: 1px solid #eee; 
 
} 
 
li .first { 
 
    background-color: #333; 
 
    padding: 20px; 
 
    color: #fff; 
 
    flex: 1; 
 
} 
 
li .second { 
 
    background-color: orange; 
 
    align-items: center; /*CHANGED THIS*/ 
 
    display: flex; 
 
}

<ul> 
 
    <li> 
 
    <a href="#" class="first">Link</a> 
 
    <a href="#" class="second">(icon)</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="first">Longer LongerLonger Longer link</a> 
 
    <a href="#" class="second">(icon)</a> 
 
    </li> 
 
</ul>