Flex-grow is not expanding the child div-CodePudding

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 >
        <div >
            <div >
                <div >
                    <div >1</div>
                </div>
                <div >
                    <div >2
                        <br>Более высокий блок
                    </div>
                </div>
                <div >
                    <div >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;
}

CodePudding user response：

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 >       
         <div >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%;
       }

CodePudding user response：

If I understood it right, it's because of the padding. Try removing it in the wrapper so it'll reach the end of the viewport. If you remove it, it's fixed (atleast for me). You need to also reset the CSS (using Meyer's Reset in example) for you to reset all default browser rules.