htmlcssflexboxflex3

Flex-grow is not expanding the child div

I'm new to css and I need help with one question. Why flex-grow does not expand the block__column_2 div till the end of the screen? It should be the expected behaviour according to the course theory. Please advise what I'm doing wrong?

Code sample can be seen below. index.html + style.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="block">
            <div class="block__row">
                <div class="block__column block__column_1">
                    <div class="block__item">1</div>
                </div>
                <div class="block__column">
                    <div class="block__item block__column_2">2
                        <br>Более высокий блок
                    </div>
                </div>
                <div class="block__column block__column_3">
                    <div class="block__item">3</div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

.wrapper{
    height: 100%;
    overflow: hidden;
    min-height: 100%;
    padding: 50px;
}
body{
    font-family: Arial, Helvetica, sans-serif;
}
    
.block__row{
    border: 20px solid #ece89d;
    margin: 0px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    height: 1024px;
    align-items: stretch;       
}

.block__column{
border: 20px solid #5e5373;
}

.block__column_1{}
.block__column_2{  
    flex-grow: 1;
    flex-basis: auto; 
}
.block__column_3{}

.block__item{
    background-color: #18b5a4;
    padding: 50px;
    font-size: 50px;
    color: #fff;
    font-weight: 700;
text-align: center;
}
Solution

  • remove block__column_2 class from div.block__item and add to div.black_column
    and add display:flex for block__column The display: block property on the parent element prevents flex-grow from having an effect. Try setting the display: block property on the parent to display: flex. and add width:100%; to the .block__item

        <div class="block__column block__column_2">       
         <div class="block__item">2
            <br>Более высокий блок
         </div>
    </div>




 
     .block__column{
     border: 20px solid #5e5373;
     display: flex;
     }
     .block__column_1,
     .block__column_3{
      flex-grow: 0;
      }

    .block__column_2{ 
     flex-grow: 1;
     }

    

     .block__item{
      background-color: #18b5a4;
      padding: 50px;
      font-size: 50px;
      color: #fff;
      font-weight: 700;
      text-align: center;
      width: 100%;
       }