css 实现 justify-content: flex-end; 并拥有垂直滚动条

要实现`justify-content: flex-end;`并拥有垂直滚动条，可以使用以下CSS样式：

.container {
  display: flex;
  justify-content: flex-end;
  overflow-y: scroll;
  height: 200px; /* 设置容器的高度，超出高度时会出现垂直滚动条 */
}

在上述代码中，我们创建了一个容器`.container`，并将其设置为`display: flex;`以启用Flex布局。然后，我们使用`justify-content: flex-end;`将子元素沿主轴的末尾对齐。为了实现垂直滚动条，我们使用`overflow-y: scroll;`将容器的内容超出高度时显示垂直滚动条。最后，我们设置容器的高度为200px，你可以根据需要调整高度。

这样，当容器内的内容超出容器的高度时，就会出现垂直滚动条，并且子元素会沿主轴的末尾对齐。

相关问题

给弹出层写一个css样式，上部是主体内容放三个高度不定的卡片，下部是定位在底部的两个按钮分别是取消和确定，要求弹出层高度随自动撑开

以下是一个简单的弹出层的 CSS 样式，满足你的需求：

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  width: 80%;
  max-width: 500px;
  overflow: auto;
}

.popup .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.popup .card {
  flex-basis: calc(33.33% - 10px);
  margin-bottom: 20px;
  background-color: #f5f5f5;
  padding: 20px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.popup .buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.popup .button {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #ccc;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.popup .button:hover {
  background-color: #999;
}

解释一下样式：

- `.popup` 是整个弹出层的样式，使用了固定定位使其居中，设置了最大宽度和滚动条来适应不同大小屏幕的需求。
- `.cards` 是一个包含卡片的容器，使用了 flex 布局。
- `.card` 是卡片的样式，使用了 flex 等分和 margin 来排列卡片。
- `.buttons` 是按钮的容器，使用了 flex 布局并且设置了顶部的 margin 来与卡片隔开。
- `.button` 是按钮的样式，使用了 margin 和 padding 来排列按钮，并且设置了背景色、边框等样式。

你只需要将 HTML 中弹出层的内容放在一个类名为 `.popup` 的容器中，就可以使用这个 CSS 样式。同时，也可以根据需要自行调整样式。