在HTML中，可以将选择元素呈现为“列表框”，用户可以通过设置元素的“大小”属性从列表中而不是从下拉列表中选择项目。例如：
https://jsfiddle.net/0ma8gdt2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div class="container">
<select size="5">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</body>
</html>
.container {
border: 1px solid black;
height: 2in;
width: 1in;
}
但请注意，列表框不会扩展到容器的底部，“size”属性不会让我们能够做到这一点。那么，我如何让盒子一直延伸到容器的底部？
可以使用CSS flexboxes执行此操作：
https://jsfiddle.net/rov12uh4/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div class="container">
<select class="selector" size="2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
</body>
</html>
.container {
display: flex;
flex-direction: column;
border: 1px solid black;
height: 2in;
width: 1in;
}
.selector {
flex-grow: 1;
}
列表框的行为符合要求，即使技术上有更多的项目，否则大小= 2将允许。