跨度宽度不适合文本内容

Question

我有以下标题。我希望#legend span的宽度适合其文本内容，但是当文本中断时，跨度的宽度会更大。为什么？参见：http://jsfiddle.net/sez08Lw6/

body{
    width: 600px;
    margin: 0px auto;
}
#container {
    border: 15px solid orange;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#firstDiv{
    border: 10px solid brown;     
    width: 130px;
    margin: auto 20px;
}
#secondDiv{
    border: 10px solid skyblue;         
    display: flex;
    align-items: center;
    margin: auto 20px;
}
#icon{
  height: 24px;
  width: 24px;
  background-color: yellow;
  margin-right: 10px;
}


#thirdDiv{
    border: 5px solid yellowgreen;
    width: 200px;    
    margin: auto 20px;
}

<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">
    <span id="icon"></span>
    <span id="legend">Some long text that will be breaked</span>
  </div>
  <div id="thirdDiv">THIRD</div>
</div>