当父/浏览器缩小时缩小子元素的相对位置，父使用溢出答案

【问题标题】：Shrink child element relative positioned when the parent/browser shrink, with parrent using overflow当父/浏览器缩小时缩小子元素的相对位置，父使用溢出
【发布时间】：2019-01-24 11:03:22
【问题描述】：

在下面的代码中，我有一个轮播代码。

只显示一部分图像（container），并使用 javascript 向左/向右移动包含所有图像的 div（items）。

如果浏览器窗口缩小the container 变小，可以缩小图像

图片数量（item）不固定。

.carousel {
  max-width: 70%;
  margin: 1.5rem 1.5rem 0 1.5rem;
  position: relative; }
  .container {
    margin: 0;
    padding: 1rem 0;
    position: relative;
    overflow: hidden; }
  .items {
    display: flex;
    flex-direction: row;
    left: 0;
    position: relative;
    top: 0;
    transition: 0.2s; }
  .item {
    cursor: pointer;
    height: 9.375rem;
    padding: 0.5rem;
    transition: 0.2s;
    width: 9.375rem; 
 }

<div class="carousel" >
    <div class="container">
        <div class="items">
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
         </div>
   </div>       
</div>

【问题讨论】：

标签： css flexbox css-position

【解决方案1】：

目前您使用 rem 作为量词，它基于根元素的字体大小，但我没有看到您根据媒体查询调整任何有关字体的内容。如果您不是特别需要像 100x100 这样的精确测量值，那么我建议您使用视口量词，因为当您的浏览器缩小时这些值会发生变化。我为外观添加了一个 flex-wrap 属性，如果您愿意，您可以删除它并添加回溢出

<meta name="viewport" content="width=device-width,initial-scale=1.0">
.carousel {
  max-width: 70%;
  margin: 1vw 1vw 0 1vw;
  position: relative; }
  .container {
    width:100%;
    margin: 0;
    padding: 1vw 0;
    position: relative; }
  .items {
    display: flex;
    flex-direction: row;
    flex-wrap : wrap;
    left: 0;
    position: relative;
    top: 0; }
  .item img {
    cursor: pointer;
    height: 10vw;
    margin:1vw;
    transition: 0.2s;
    width: 10vw; 
 }

Fiddle Demo

【讨论】：