CSS flexbox“align-items：flex-end;”不适用于图像

Question

我试图创建一个标题，可以在右边有一个按钮（图像）或一个文本标签 - ＆amp;标题的左侧：

<div id="header">
    <div id="headerContent">
        <div id="btnLeft"><img src="myimage.png" height="30"></div>
        <div id="title" class="button">HeaderTitle</div>
        <div id="btnRight" class="headerBtn button">RightButton</div>
    </div>
</div><!-- header -->

因此我在headerContent DIV上使用CSS flexbox模型：

#headerContent {
    width: 100%;
    height: 30px;
    font-family: "Helvetica";
    font-size: 20px;
    line-height: 20px;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    -webkit-align-items: flex-end;
}

不幸的是，CSS属性align-items: flex-end;仅适用于文本，但不适用于图像。图像始终具有较小的偏移量，因此它会溢出标题DIV的顶部。 感觉我只是在监督一些小事，但我无法弄清楚它是如何起作用的...... 在此先感谢您的帮助!!!

Answer 1

<强> Demo

给#btnLeft

高度

#btnLeft {
    height: 30px;
}