为什么我的div调整大小？

我的标题被组织为一张表格。我终于设法让最后一个li漂浮在右边，X％左边，同时仍然兼容不同的屏幕尺寸。然而，我的'个人资料图片'div正在调整大小，并且因此而变得像一个被挤压的圈子。我如何确保div的宽度和高度始终为40px（如果这是正确的方式）？为什么我的div调整大小？

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>

来源

2016-01-09 Liam Macmillan

你的意思是这样的https://jsfiddle.net/uxdLexs8/1/？ –

完美！ flex：0 0 40px;解决了它。想添加这个答案吗？ –

Nah，很高兴我能帮上忙。 –