在垂直和水平居中位置绝对元素的同时设置最大宽度和高度

Question

在满足其他几个条件的同时，我试图将div居中。

我的UI是一组动态添加的但具有固定宽度的图块。

我希望图块组始终居中。垂直和水平（v＆h）。

它也不应超过某个宽度。对于此示例，假设最大宽度为400px。

如果在添加图块的同时div超过400像素，则应将下一个图块分成不同的行。发生这种情况时，div应该再次居中（v＆h）。

如果div不超过400像素（较少的图块），则图块应仍以v＆h为中心。

当图块容器超过屏幕高度时，它应可滚动。发生这种情况的方式是，第一个图块将放在顶部，而底部的图块应被隐藏。

这是我的意思的草图：

红色方块是第一个方块。

所以我要做的是我将瓷砖容器的位置设为绝对，并为其指定了最大宽度和最大高度。

.tile-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate( -50%, -50% );
  border: 2px solid green;
  max-width: 400px;
  max-height: 100vh;
  overflow-y: auto;
}

这样，它始终以v＆h为中心，在达到最大高度时滚动，在只有很少的图块时以v＆h为中心。

但是问题是，它没有达到最大宽度。

在我附带的小提琴示例中，容器的最大宽度为400px，但在294px之后停止扩展。

如果我使用flex来执行此操作，则会弄乱可滚动部分，其中第一个图块应位于顶部。

我在这里做什么错了？

这里是fiddle。

Answer 1

如下更改您的scss：

.tile-container {
border: 2px solid green;
max-width: 400px;
max-height: 100vh;
overflow-y: auto;
}

.container {
border: 2px solid;
width: 100%;
height: 100vh;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

这里更新了jsfiddle