避免文本增加元素的大小

Question

我有两个div - 一个是固定高度，另一个使用弹性框占用其余的水平空间：

#first
{
   width:300px;
    height: 200px;
   background-color:#F5DEB3;
}
#second
{
   width:300px;
   background-color: #9ACD32;
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, */
}

当底部div 内部有很长的文本时，我将如何防止它扩展？(同时仍仅占用剩余的水平空间。

http://jsfiddle.net/vc1nb6e3/

Answer 1

设置flex-grow: 0;和flex-shrink: 0;以防止元素增大或缩小。还放了一个overflow: auto;

例：http://jsfiddle.net/skeurentjes/rLgaqwkp/3/

#wrapper
{
    width:300px;
    height:300px;
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-direction: column;
}
#first
{
    width:300px;
    height: 200px;
    flex-grow: 0;
    flex-shrink: 0;
    background-color:#F5DEB3;
}
#second
{
    width:300px;
    overflow: auto;
    background-color: #9ACD32;
    flex: 1; /* NEW, */
}

Answer 2

那么，你想如何处理不适合的文本？

你可以用overflow做点什么.

隐藏它：

#second
{
   width: 300px;
   background-color: #9ACD32;
   flex: 1;
   overflow: hidden;
}

添加滚动条：

#second
{
   width: 300px;
   background-color: #9ACD32;
   flex: 1;
   overflow: scroll; // overflow: auto;
}

Answer 3

您需要在 #second CSS 中添加溢出值，文档在这里

document.getElementById("addText").addEventListener("click", myclick);
     function myclick(){
    document.getElementById("second").innerHTML = "test test test test test test test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test test"
    }

#wrapper
{
   width:300px;
   height:300px;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
#first
{
   width:300px;
    height: 200px;
   background-color:#F5DEB3;
}
#second
{
   width:300px;
   background-color: #9ACD32;
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, */
    overflow:auto;
}

<button id="addText">add text</button>
<div id="wrapper">
    <div id="first"></div>
    <div id="second"><h1></h1></div>
</div>