Flex-grow didn't fix column size in flexbox layout #520
Description
Affected version
main
No same issues found
- Yes, I search all issues but not found.
Bug type
CSS/DOM Style
Which frontend framework you are using.
No response
Steps to reproduce
Code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="portrait" name="screen-orientation" />
<meta content="portrait" name="x5-orientation" />
<meta content="webkit" name="renderer" />
<meta content="max-age=180" http-equiv="Cache-control" />
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>请配置页面标题</title>
<meta name="keywords" content="请配置页面关键词" />
<meta name="description" content="请配置页面描述" />
</head>
<head>
<title>Flex Layout Example</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px 20px;
}
.list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
overflow: scroll;
background-color: #f1f1f1;
padding: 20px;
}
.list-item {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
width: 100%;
max-width: 500px;
box-sizing: border-box;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px 20px;
}
.input {
display: flex;
flex-grow: 1;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 0;
background-color: #f1f1f1;
box-sizing: border-box;
outline: none;
}
.input:focus {
background-color: #fff;
}
.button {
background-color: #4CAF50;
color: #fff;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 0;
cursor: pointer;
}
.button:hover {
background-color: #3e8e41;
}
.chat {
display: flex;
overflow-x: hidden;
width: 100%;
height: 100vh;
flex-direction: column;
}
</style>
</head>
<body>
<div class="chat">
<div class="header">
<h1>My Website</h1>
<a href="#">Logout</a>
</div>
<div class="list">
<div class="list-item">Item 1</div>
<div class="list-item">Item 2</div>
<div class="list-item">Item 3</div>
<div class="list-item">Item 4</div>
<div class="list-item">Item 5</div>
<div class="list-item">Item 6</div>
<div class="list-item">Item 7</div>
<div class="list-item">Item 8</div>
<div class="list-item">Item 9</div>
<div class="list-item">Item 10</div>
<div class="list-item">Item 11</div>
<div class="list-item">Item 12</div>
<div class="list-item">Item 13</div>
<div class="list-item">Item 14</div>
</div>
<div class="footer">
<input type="text" class="input" placeholder="Enter your message...">
<button class="button">Send</button>
</div>
</div>
</body>
</html>Expected results
The list-items height should be fixed.
Actual results
The list-items height didn't fixed.