Flexbox成长为包含

Question

我有一个相当简单的事情，我试图在这里做。

我希望拥有一个动态的群组列表，每个群组都有一个动态的项目列表。我试图很好地展示它们，这样群体就不会太高了。为此，我在列表中使用了if match:属性。

但是，正如您可以看到组中是否有多个项目 - 当项目包装时，组本身不会扩大以容纳它们。有没有办法让flexbox这样做 - 或者需要一个不同的CSS框架？

＆＃13;

＆＃13;

max-height

＆＃13;

.height-ruler {
  height: 100px;
  background-color: blue;
  width: 10px;
}

.groups {
  display: flex;
  flex-flow: row wrap;
  border: solid 3px black;
  margin: 2px;
  padding: 2px;
  width: 500px;
}

.group {
  display: flex;
  flex-flow: column wrap;
  flex: 1 0 auto;
  border: dashed 1px black;
  margin: 2px;
  padding: 2px;
  max-height: 100px;
}

.item {
  background-color: pink;
  border: solid 1px red;
  width: 50px;
  height: 20px;
  margin: 2px;
}

＆＃13;

＆＃13;

＆＃13;