为什么我的div会重新调整大小？

Question

我的标题结构为表格。我终于设法做到这一点，使最后一个li向右浮动，X％向左浮动，同时仍然兼容不同的屏幕尺寸。但是，我的个人资料图片＆＃39; div正在调整大小并且类似于一个压扁的圆圈。如何确保div的宽度和高度始终为40px（如果这是绕过它的正确方法）？

CSS

#hdr-profile {
    align-items: center;
    border: 1px dotted red;
    display: flex; 
    margin-left: auto;
    white-space: nowrap;
}

#hdr-profile-pic {
    width: 40px;
    height: 40px;
    background: white url("https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/11760274_1109394289087955_3712628479579288500_n.jpg?oh=ff64d9b1a44338d53d414459ff92aa71&oe=574558FA") no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
    cursor: pointer;
}

HTML

    <li>
        <div id="hdr-profile">
            <div id="hdr-profile-pic" title="My Profile">
                <div id="hdr-profile-country" title="Liam is in Spain"></div>
            </div>
            <span id="hdr-profile-name" class="select"><a href="#">Liam Macmillan</a></span>
            <i class="material-icons md-26 icn-lft icn-hvr">arrow_drop_down</i>
        </div>
    </li>

Answer 1

一个简单的方法是在你的个人资料图片的css中添加一个！重要的40px

Answer 2

我怀疑这是因为下拉列表的大小。在Nenad Vracar联系的JSFiddle中，图片完全没问题。不要使用！important来强制大小，这是不好的做法并导致意外行为。相反，尝试尝试下拉列表的大小。我没有剩下的代码，或者我已经调查过了。