Question

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

我尝试做什么？使用的空白：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

如何在div中包装内容？

1 个答案: