Question

在当前的代码片段中，第一个灵活项目（即带有类＆＃39; flex-item2＆＃39;的div元素）根据适合容器的第二个灵活项目的高度而缩小。

有没有办法限制红色的顶部div（即带有类＆＃39; item1＆＃39;的第一个div元素）滚动？
另一个要求是我只想在内容超过大小的div上滚动条。（即第二个div元素与class＆＃39; item1＆＃39;）

＆＃13;

.flex-container {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: lightgrey;
}

html, body
{
    margin: 0px; 
    width: 100%;
}

html
{
    height: 100vh;
}

body
{
    min-height: 100vh;
}

.item1 {
    background-color: cornflowerblue;
    width: 100%;
    height: auto;
}
.flex-item2 {
    background-color: red;
    width: 100%;
    height: auto;
    overflow-y: auto;
}
.flex-item3 {
    background-color: green;
    width: 100%;
    height: auto;
    flex: 1 1 auto;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div class="flex-item2"><div style="background-color: red;"class="item1">flex item 1<br>flex item 1<br>flex item 1<br>flex item 1<br>flex item 1</div><div class="item1">flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br>flex item 2<br></div></div>
  <div class="flex-item3">flex item 3<br>flex item 3<br>flex item 3<br>flex item 3<br>flex item 3<br>flex item 3<br></div>  
</div>

</body>
</html>

＆＃13;

如何更改灵活项目中的滚动行为？

0 个答案: