570 lines
18 KiB
HTML
570 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Flexbox Scrollable Area</title>
|
|
<style>
|
|
.scrollable-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
width: 150px;
|
|
max-height: 300px; /* 设置最大高度以启用滚动 */
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
margin: 5px;
|
|
flex-wrap: nowrap; /* 防止子项换行 */
|
|
min-width: 0; /* 确保行宽可以扩展 */
|
|
/* border: 5px solid #c00; */
|
|
min-width: fit-content;
|
|
background-color: #444444; /* 可选：背景色 */
|
|
margin-bottom: 10px; /* 可选：行间距 */
|
|
}
|
|
|
|
.item {
|
|
flex: 0 0 auto; /* 不允许子项缩小 */
|
|
min-width: 100px; /* 设置一个最小宽度 */
|
|
margin-right: 10px; /* 可选：子项间距 */
|
|
width: 80px;
|
|
background-color: lightblue; /* 可选：背景色 */
|
|
padding: 5px;
|
|
box-sizing: border-box; /* 包括边框和内边距在宽度计算中 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="scrollable-area">
|
|
<div class="row">
|
|
<div class="item">C1kerwglkerwhgkerwgklrewkljferwlkbfwerbfcvlwerbcv</div>
|
|
<div class="item">C2</div>
|
|
<div class="item">C3</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C4</div>
|
|
<div class="item">C5</div>
|
|
<div class="item">C6</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C7</div>
|
|
<div class="item">C8</div>
|
|
<div class="item">C9</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C10</div>
|
|
<div class="item">C11</div>
|
|
<div class="item">C12</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="item">C13</div>
|
|
<div class="item">C14</div>
|
|
<div class="item">C15</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|