Html 溢出卷轴赢了'；不要在图像容器上工作

在我的移动视图中，6-7幅图像被设置为父div的100%宽度。它们应该是100%宽度，但大约是父div高度的80%。我已将容器设置为具有溢出滚动，但元素不滚动。我已经将“.stills”的高度设置为600vh，只是为了检查这是否是问题所在，但它仍然不会滚动。

HTML

---

这就是你想要做的吗？如果有，我将编辑我的答案，以描述我所做的更改

编辑： 我将CSS组织到桌面/手机中，并将它们放入媒体查询中，以明确需要重置的内容。我注意到

#stills.stills.stillwrapper

的高度是在桌面媒体查询中显式设置的，因此我使用

height:unset重置该高度


/*桌面样式-只有一些未被上述样式覆盖的继承样式*/
#剧照{
宽度：260vw；
高度：100vh；
}
#剧照，剧照{
显示器：flex；
宽度：100%；
身高：100%；
}
#静物，静物，静物{
宽度：80vw；
高度：100vh；
溢出：隐藏；
}
#静物。静物。静物包装。内部图像{
/*以防有内联属性*/
宽度：100%！重要；
高度：自动！重要；
过渡：0.3s；
}
#静止。静止。静止包装。内部图像：悬停{
转换：比例（1.1）；
}
/*移动风格*/
@介质（最大宽度：768px）{
#剧照{
宽度：100vw；
/*身高：100%*/
溢出：滚动；
}
#剧照，剧照{
宽度：100%；
高度：自动；
弯曲方向：立柱；
溢出：滚动；
}
#静物，静物，静物{
宽度：100%；
高度：未设置；
/*溢出y：滚动*/
}
}

JS-Bin
我不清楚你想做什么。每个.still wrapper是否应该只显示80%的图像，而其他20%应该滚动？我将发布一个图像我只是为了能够向下滚动并查看其余的图像。您只希望图像像常规站点一样垂直堆叠，除了默认的浏览器滚动条之外没有滚动条？是的，这就是为什么我将with和height设置为100%，除非flex只是柱
<div id="stills" data-tab-content>
            <div class="stills">
               <div class="still-wrapper">
                  <img class="inner-img" loading="lazy" src="/img/MA/stills/1.jpg" alt="still 1">
               </div>
               <div class="still-wrapper">
                  <img class="inner-img" loading="lazy" src="/img/MA/stills/2.jpg" alt="still 2">
               </div>
               <div class="still-wrapper">
                  <img class="inner-img" loading="lazy" src="/img/MA/stills/3.jpg" alt="still 3">
               </div>
               <div class="still-wrapper">
                  <img class="inner-img" loading="lazy" src="/img/MA/stills/4.jpg" alt="still 4">
               </div>
               <div class="still-wrapper">
                  <img class="inner-img" loading="lazy" src="/img/MA/stills/5.jpg" alt="still 5">
               </div>
               <div class="still-wrapper">
                  <img class="inner-img" loading="lazy" src="/img/MA/stills/6.jpg" alt="still 6">
               </div>
               <div class="still-wrapper">
                  <img class="inner-img" loading="lazy" src="/img/MA/stills/7.jpg" alt="still 7">
               </div>
               <div class="still-wrapper">
                  <img class="inner-img" loading="lazy" src="/img/MA/stills/8.jpg" alt="still 8">
               </div>
            </div>
         </div>

/* MOBILE STYLES */
#stills {
   width:100vw;
   height: 100%;
   overflow: scroll;
}

.stills {
 
   width: 100%;
   height: 600vh;
   flex-direction: column;
   overflow: scroll;
}
.still-wrapper {
   width: 100%;
   height: 100%;
   /* overflow: scroll; */
}

/* DESKTOP STYLES - ONLY SOME INHERITED WHICH HAVEN'T BEEN OVERIDDEN BY STYLES ABOVE */
#stills {
   width:260vw;
   height: 100vh;
}

.stills {
   display: flex;
   width: 100%;
   height: 100%;

}

.still-wrapper {
   width: 80vw;
   height: 100vh;
   overflow: hidden;
}

.inner-img {
   /* Just in case there are inline attributes */
   width: 100% !important;
   height: auto !important;
   transition: 0.3s;
}

.inner-img:hover {
   transform: scale(1.1);
}