html - 仅单击 block 元素的文本

Question

我有一个固定大小的 div，我在其中使用 flexbox 布局定位多个内联 a。我的问题是，我还需要响应在 anchor 文本之外的 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