1

I have three boxes in a container. I applied display: flex, and I set flex-grow: 1; on children. Everything was fine until I put some text into a child when the box got bigger. How to make the children to remain o a same width even if I put some content into them?

html, body{
    width: 100%;
    height: 100%;
}
.page-wrapper{
    width: 100%;
    height: 50%;
    display: flex;
  
}
.column{
    height: 100%;
    border: 1px solid red;
    flex-grow: 1;
    margin: 20px 10px;

}
<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="main.css">
    </header>

    <body>
        <div class="page-wrapper">
            <div class="column">
                <h1>Hello World</h1>
            </div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div class="img"></div>
    </body>
</html>
user
  • 37
  • 4

2 Answers2

0

Add flex-basis: 0 to your .column element. No matter how many columns you end up using, flex-basis: 0 will always make each of your columns be of equal width.

.column {
    height: 100%;
    border: 1px solid red;
    margin: 20px 10px;
    flex-grow: 1;
    flex-basis: 0;
}
BradTheBluefish
  • 146
  • 6
-1

html, body{
    width: 100%;
    height: 100%;
}
.page-wrapper{
    width: 100%;
    height: 50%;
    display: flex;
  
}
.column{
    height: 100%;
    border: 1px solid red;
    flex-grow: 1;
    flex-basis: 33.33%;
}
<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="main.css">
    </header>

    <body>
        <div class="page-wrapper">
            <div class="column">
                <h1>Hello World</h1>
            </div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div class="img"></div>
    </body>
</html>

Try this code.

KarthikNayak98
  • 363
  • 3
  • 13