html - 如何将内容包裹在div中？

Question

我有 flexbox 容器和 div。我希望内容保留在 div 中。从某种意义上说，如果内容超过了 div 的宽度，那么它应该从下一行开始。

我试过做什么？使用 white-space: nowrap 属性。这添加了不需要的水平滚动条。

下面是代码，

CSS:

.notification_message_wrapper { 
    width: calc(100% - 450px);
    position: absolute;
    top: 105px;
    left: 250px;
    margin: 0 auto;
    display: flex;
    align-items: center;

.box {
     background-color: white;
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
     top: 100px;
     left: 250px;
     flex: 1;
 }

.message {
    display: flex;
    color: green;
    flex-direction: column;
    justify-content: space-between;
    font-weight: normal;
    padding: 10px;
    white-space: nowrap;

.content {
    height: auto;
    white-space: nowrap;
}}}

HTML:

 <div class="box_wrapper">
        <div class="box">
             <div class='message>
                <div class="container">
                    <div>title</div>
                    <div>detail</div>
                    <div>
                        <div>
                            <h2>Debug</h2>
                            someresponse
                        <div/></div></div></div></div>
                    <div>close</div></div>

带标题的 div，细节不应该超出 div...我该如何解决这个问题。有人可以帮忙吗谢谢。

Answer 1

只需将 overflow: auto; 或 overflow: hidden 添加到您的 div。引用此链接 https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow