html - 将子 div 的高度扩展到其父 div 的高度

Question

我的网页结构如下：

它看起来像这样：

我的link__wrapperCSS如下：

.link__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;
}

我link__infoContainer的没有扩展到 100% 的link__wrapper高度。看这里：

这是我的link__infoContainer代码：

.link__infoContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
  width: 100%;
  position: inherit;
  min-height: 100%;
}

我怎样才能让我的link__infoContainer比赛与我的身高相匹配link__wrapper？

标签： htmlcssflexboxheight

Answer 1

将类更新.link__wrapper为此：

.link__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch; /* "stretch" instead of "center" */
  width: 100%;
  min-height: 100%;
}

这会将 的孩子拉伸.link__wrapper到它的高度。