Html CSS:Inline Div，文本长时自动宽度向下推

我面临一个与inline-div相关的css问题。 当文本（或句子）较长时，inline div向下按，如下图所示：

但是，当我添加换行符时，它可以完美地工作

如何在不使用

的情况下使其工作

要发布的主要内容是动态的，并且需要响应。 谢谢

请注意：这是我实际代码的简化版本。在 实际代码主容器的宽度为100%

HTML

---

使用：

空白：nowrap用于包含长句的div。
您可以使用flexbox。加上

#container { 
  display: flex;
}


正文{
宽度：350px；
保证金：0px自动；
}
#容器{
显示器：flex；
边框：15px实心橙色；
}
#第一组{
边框：10px纯棕色；
显示：内联块；
宽度：70px；
溢出：隐藏；
垂直对齐：顶部；
}
#二等兵{
边框：10px纯色天蓝色；
浮动：左；
宽度：70px；
}
#第三{
显示：内联块；
边框：5px实心黄绿色；
垂直对齐：顶部；
}

第一
第二
第三

更多内容
更多内容
嘿，谢谢。我的主容器是100%。当我使用flex时，宽度发生溢出。嘿。谢谢，但它不起作用。当我使用它时，溢出正在发生。请尝试使用
空白
属性（normal、nowrap、pre、pre-line、pre-wrap、initial、inherit），我想您需要的是
wihte space:pre
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;    
}

#container { 
  display: flex;
}