我如何使具有flex的父母有孩子溢出父母

Question

我正在尝试制作水平滚动的东西...

父容器的高度和宽度固定。

孩子们也有固定的身高和固定的高度。

父容器具有display: flex;属性。

但是，当应该让子容器溢出父容器时，它将缩小子容器的大小（宽度）以保留在父容器中。

这是正在发生的事情的确切例子：

https://jsfiddle.net/2ch4ro09/2/

或

body {
  margin: 0;
  background: #333;
}
.parent {
    height: 200px;
    width: 500px;
    align-items: center;
    overflow: auto;
    display: flex;
}

.child {
    height: 120px;
    width: 120px; /* Should be a square */

    background: rgba(255, 255, 255, 0.1);
    margin: 4px;
}

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

TL; DR ：

我希望子元素只是从屏幕右方飞出-不自动换行。

我该怎么做？

Answer 1

您可以这样操作：

body {
  margin: 0;
  background: #333;
}
.parent {
    height: 200px;
    width: 500px;
    align-items: center;
    overflow: auto;
    
    white-space: nowrap;
}

.child {
    height: 120px;
    width: 120px; /* Should be a square */

    background: rgba(255, 255, 255, 0.1);
    margin: 4px;
    
    display: inline-block;
}

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>