爲什麼我的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，很高興我能幫上忙。 –