当显示较小时,Div会从外部div中弹出

Question

我得到以下代码:https: //jsfiddle.net/2uhttdgk/3/

html {
  height: 100%;
}
html, body {
    min-height: 100% !important;
    /* prevent horizontal scrolling */
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


#menuButton {
    float:left;
    background-image: url("../images/hamburger_menu.png");
    width: 50px;
    height: 40px;
    margin-right: 5px;
}

#powerButtonBox {
    float: right;
}

#outerBox {
    min-height: 100%; 
    height: auto !important;
    height: 100%;
}

#title {
    background: #E95353;
    padding: 10px;
    color: white;
    font-size: x-large;
}


#outerBox {
    width: 100%;
    height: 100%;
}


.nav a small {
    display:block;
}
.nav {
    background: #E95353;
}
.nav a {
    border-radius:0px;
    color: white;
}

.nav-pills>li {
    text-align: center;
    padding: 10px;
    font-size: large;
}

.nav-pills>li.active { 
    background-color: #E95353; /*EF8686*/
    border-bottom: 5px solid white;
    color: white;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, 

.nav-pills>li.active>a:focus { 
    color: #fff; 
}

<div id="outerBox">
    <div id="title"> 
        <div id="menuButton"></div>
        This is the Title
        <div id="powerButtonBox">It is <a href="#" id="powerButton">powered on</a></div>
    </div> 

    <ul class="nav nav-pills nav-justified">
        <li id="newStuffButton" data-target="#" data-slide-to="0" class="store-tab active"><a href="#">New Stuff</a></li>
        <li id="doneStuffButton" data-target="#" data-slide-to="1" class="store-tab"><a href="#">Done</a></li>
    </ul>

    <div id="newStuff" class="list-group tabContent"></div>
    <div id="doneStuff" class="list-group tabContent"></div>
</div>

我的问题是,当显示宽度太小时,带按钮的div会溢出title-div.在jsfiddle中滑动较小的宽度时,您可以简单地重新创建错误.

我可以,有一个换行符.那是完美的.但它仍然应该有红色背景并且在title-div中.我怎么能做到这一点？

Answer 1

只需添加display: inline-block;,并width: 100%;在#title元素.

然后高度将调整其内容,红色背景将保持不变.

编辑

我不知道哪一个更干净,或者其中一个更好,但像@Temani Afif说overflow: auto;也会有效.