CODEWITHSUNDEEP
htmlcssflexbox
cak3_lover
cak3_lover

Reputation: 1938

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

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

Upvotes: 0

Views: 1366

Answers (4)

Brebber
Brebber

Reputation: 3064

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>

Upvotes: 1

Gowtham Raj J
Gowtham Raj J

Reputation: 967

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

Upvotes: 0

mowx
mowx

Reputation: 77

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>

Upvotes: -1

Paulie_D
Paulie_D

Reputation: 115046

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>

Upvotes: 2

Related Questions