柔性盒：柔性收缩和柔性包装不能按预期工作

Question

我的问题可以用这个例子来解释：[JSFiddle]

#flex-container-1 { /*has 10 items*/
  flex-wrap: no-wrap;
}

#flex-container-2 { /*has 10 items*/
  flex-wrap: wrap;
}

#flex-container-3 { /*has 11 items*/
  flex-wrap: wrap;
}

我有三个容器，其中两个容器按预期运行。 但第三个不是缩小第11个元素，而是将其附加到容器之外。

有没有办法缩小第三个容器中的项目，使其不会溢出？

[JSFiddle] https://jsfiddle.net/fpcz3ghc/1/。

容器的高度应该固定。

Answer 1

不要在.flex-item上定义固定高度。而是设置max-height:50px;。

尝试以下解决方案：

＆＃13;

＆＃13;

.flex-container {
  height: 100px;
  width: 200px;
  background-color: black;
  display: flex;
  margin: 50px;
}
#flex-container-1 {
  flex-wrap: no-wrap;
}
#flex-container-2 {
  flex-wrap: wrap;
}
#flex-container-3 {
  flex-wrap: wrap;
}
.flex-item  {
  max-height:50px;
  flex-basis: 50px;
  background-color:red;
  border-radius: 20px;
}

＆＃13;

<div id="main">
  <div id="flex-container-1" class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
  <div id="flex-container-2" class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
  <div id="flex-container-3" class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;