Text in flex box item is causing flex box item to expand

Question

I've created a flex box container and 3 child divs in it and
I want to keep the sizes of the 3 in same the same ratio (1:1:1)
but when I add some text into the child divs, they change ratio to cover up for the text overflow

Like this:

#container
{
    display: flex;
    width: 100%;
    height: 100px;
    text-align:  center;
}
.item
{
    color: white;
  flex-grow:1;

  
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
before text:
<div id="container"> 
 <div class="item" style="background-color:red;"></div>
 <div class="item" style="background-color:green;"></div>
 <div class="item" style="background-color:blue;"></div>
</div>
<br>
after text:
<div id="container"> 
 <div class="item" style="background-color:red;">hello there</div>
 <div class="item" style="background-color:green;">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
 <div class="item" style="background-color:blue;">no</div>
</div>
</body>
</html>

so how do I maintain the aspect ratio while adding text?

NOTE:
hiding the overflow is acceptable

Paulie_D · Accepted Answer · 2021-02-27T22:15:38.000

Change flex-grow:1 to flex:1

#container
{
    display: flex;
    width: 100%;
    height: 100px;
    text-align:  center;
}
.item
{
    color: white;
  flex:1;
 min-width:0; /* thanks to Temani */
  
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
before text:
<div id="container"> 
 <div class="item" style="background-color:red;"></div>
 <div class="item" style="background-color:green;"></div>
 <div class="item" style="background-color:blue;"></div>
</div>
<br>
after text:
<div id="container"> 
 <div class="item" style="background-color:red;">hello there</div>
 <div class="item" style="background-color:green;">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
 <div class="item" style="background-color:blue;">no</div>
</div>
</body>
</html>

+ min-width:0 (or overflow:auto) to make the middle one shrink on small screens — Temani Afif, Feb 27 '21 at 22:13

score 1 · Answer 2 · answered Feb 27 '21 at 23:03

You may try to add flew-basis: 0 to .item. See updated example below:

#container
{
    display: flex;
    width: 100%;
    height: 100px;
    text-align:  center;
}
.item
{
    color: white;
  flex-grow:1;
  flex-basis: 0;

  
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
before text:
<div id="container"> 
 <div class="item" style="background-color:red;"></div>
 <div class="item" style="background-color:green;"></div>
 <div class="item" style="background-color:blue;"></div>
</div>
<br>
after text:
<div id="container"> 
 <div class="item" style="background-color:red;">hello there</div>
 <div class="item" style="background-color:green;">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
 <div class="item" style="background-color:blue;">no</div>
</div>
</body>
</html>

Sorry. I have been to fast. Have not seen that the answer has just been given. Additional @gowthamRajJ presented an alternative solution. — Brebber, Feb 27 '21 at 23:06

score 0 · Answer 3 · answered Feb 27 '21 at 22:47

Issue is caused by the default value flex-basis: auto for .item. You might want to consider adding flex-basis: 33.33%(100/no of columns) and also a max-width of same value.

In your case flex-basis: 0 would also work. Check: Make flex-grow expand items based on their original size

score -1 · Answer 4 · answered Feb 27 '21 at 22:22

Simply, change flex-grow: 1; to flex: 1 or to width: 33.3333% to .item

#container
{
    display: flex;
    width: 100%;
    height: 100px;
    text-align:  center;
}
.item
{
    color: white;
    width: 33.3333%;

  
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
before text:
<div id="container"> 
 <div class="item" style="background-color:red;"></div>
 <div class="item" style="background-color:green;"></div>
 <div class="item" style="background-color:blue;"></div>
</div>
<br>
after text:
<div id="container"> 
 <div class="item" style="background-color:red;">hello there</div>
 <div class="item" style="background-color:green;">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
 <div class="item" style="background-color:blue;">no</div>
</div>
</body>
</html>

Text in flex box item is causing flex box item to expand

4 Answers4