html - flexbox容器溢出自动不起作用

Question

html

<div class="upcomeingEvents">
  <div class="eventContainer"></div>
  <div class="eventContainer"></div>

  ....
</div>

css

.upcomeingEventS{
    display: flex;
    overflow: auto;
}
.eventContainer{
    flex-shrink: 0;
    width: 400px;
}

上面的代码不起作用，.eventContainer它漂浮在整个屏幕上。

您可以在https://lms.bdevg.com/下面的 text中看到这一点Upcomeing Events。

这支笔也是如此https://codepen.io/ats99/pen/JjEzRyV?editors=1100

标签： htmlcss

Answer 1

使用flex-basis: 400px;而不是width: 400px;.