CODEWITHSUNDEEP
htmlcss
GeForce RTX 4090
GeForce RTX 4090

Reputation: 3498

Avoid text increasing the size of an element

I have two div's - one is fixed height, the other takes up the rest of the horizontal space using flex box:

#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, */
}

How would I prevent the bottom div from expanding when it gets a long text inside of it? (While still taking up only the remaining horizontal space.)

http://jsfiddle.net/vc1nb6e3/

Upvotes: 0

Views: 57

Answers (3)

claudy399
claudy399

Reputation: 42

You need to add an overflow value in the #second CSS , documentation here

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>

Upvotes: 0

SKeurentjes
SKeurentjes

Reputation: 1878

Set flex-grow: 0; and flex-shrink: 0; to prevent the element to grow or shrink. Also put a overflow: auto;

Example: 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, */
}

Upvotes: 1

Roberto Zvjerković
Roberto Zvjerković

Reputation: 10137

Well, what would you like to do with the text that doesnt fit?

You can do something with the overflow.

Hide it:

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

Add a scroll:

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

Upvotes: 1

Related Questions