CSS：內聯Div與自動寬度下推時，文本很長

Question

我面臨一個css問題實現內聯div。 當文本（或sentece）很長時，內嵌格按下圖所示：

但是，當我添加換行符時，它完美地工作。

如何在無需使用<br>的情況下使其工作？

要發佈的主要內容是動態的，它也需要有響應。 感謝

請注意：這是我的實際代碼的簡化版本。在 實際代碼的主容器的寬度爲100％

HTML

<div id="container"> 
<div id="firstDiv">FIRST</div> 
<div id="secondDiv">SECOND</div> 
<div id="thirdDiv">THIRD 
<br>some more content<br> some more content 
</div> 

CSS

body{ 
    width: 350px; 
    margin: 0px auto; 
} 
#container { 
    border: 15px solid orange; 
} 
#firstDiv{ 
    border: 10px solid brown;  
    display:inline-block; 
    width: 70px;  
    overflow:hidden; 
    vertical-align:top; 
} 
#secondDiv{ 
    border: 10px solid skyblue;   
    float:left; 
    width: 70px;  
} 
#thirdDiv{ 
    display:inline-block; 
    border: 5px solid yellowgreen; 
    vertical-align:top;  
} 

Answer 1

使用：white-space: nowrap;用於容納所述長句股利。

Answer 2

您可以使用flexbox。只需添加

#container { 
    display: flex; 
} 

body { 
 
    width: 350px; 
 
    margin: 0px auto; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    border: 15px solid orange; 
 
} 
 

 
#firstDiv { 
 
    border: 10px solid brown; 
 
    display: inline-block; 
 
    width: 70px; 
 
    overflow: hidden; 
 
    vertical-align: top; 
 
} 
 

 
#secondDiv { 
 
    border: 10px solid skyblue; 
 
    float: left; 
 
    width: 70px; 
 
} 
 

 
#thirdDiv { 
 
    display: inline-block; 
 
    border: 5px solid yellowgreen; 
 
    vertical-align: top; 
 
}

<div id="container"> 
 
    <div id="firstDiv">FIRST</div> 
 
    <div id="secondDiv">SECOND</div> 
 
    <div id="thirdDiv">THIRD 
 
    <br>some more content<br> some more content 
 
    </div>