저는 CSS를 처음 접하는데 문제가 있어 도움이 필요합니다. flex-grow가 block__column_2 div를 화면 끝까지 확장하지 않는 이유는 무엇입니까? 커리큘럼 이론에 따르면 이는 예상되는 행동이어야 합니다. 내가 뭘 잘못하고 있는지 말해주세요.
코드 샘플은 아래와 같습니다. 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;
} 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
div.block__item에서 block__column_2 클래스를 제거하고 div.black_column에 추가하세요
에 width:100%;를 추가하세요. 으아악그리고 block__column에 대해 display:flex를 추가합니다. 상위 요소의 display: block 속성은 flex-grow가 어떤 효과도 가지지 못하게 합니다. 디스플레이: 플렉스를 표시하려면 상위 항목의 디스플레이: 블록 속성을 설정해 보세요. .block__item