Нажав только на текст элементов блока

Question

У меня есть фиксированный размер div, в котором я размещаю несколько строк inline a с использованием макета flexbox. Моя проблема заключается в том, что мне также нужно отвечать на клики на div вне текста якорей, но flexbox заставляет их отображать block, поэтому они занимают все свободное пространство, не оставляя места для пользователя, чтобы щелкнуть по фону div.

HTML:

<div class="poem"> 
    <a class="title">Title</a> 
    <a>1919</a> 
    <a>Lead</a> 
    <a>Bachus</a> 
</div> 

Составитель CSS (я использую SASS):

.title { 
    font-size: 1.85em; 
} 

.poem { 
    width: 12.5em; 
    height: 12.5em; 
    padding: .0625; 
    background-color: rgba(gray, 0.5); 
    display: inline-flex; 
    flex-direction: column; 
} 

.poem > a { 
    flex: 0 0 auto; 
} 

.poem > a:first-child { 
    flex: 1 1 auto; 
}   

.poem > a:first-child:hover { 
    background-color: rgba(255, 165, 0, 0.5); 
} 

This pen показывает, как я хочу, чтобы раскладывать элементы, и here как они должны реально работать, когда парил/щелкнул.

Мой вопрос заключается в том, есть ли способ, чтобы остановить flexbox принуждать отображения элементов к block и держать их inline или, в качестве альтернативы, чтобы обнаружить, был ли щелчок сделан специально по тексту элемента.

Я понимаю, что я мог бы обернуть каждый a в div, но это было бы не смысловым, поэтому я предпочел бы оставить его в качестве крайней меры.

спасибо.

Answer 1

.poem { 
    align-items: flex-start; 
} 

.poem > a:first-child { 
    flex: 0 1 auto; 
    margin-bottom: auto; 
} 

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