html - 2x2 网格等高，尽管盒子内容量

Question

我正在尝试创建一个 2x2 网格，其中四个单独的框(红色、蓝色、绿色、黄色)的高度都相等，无论它们包含多少内容。

#rowTwo {
  background-color: pink;
  min-height: 25%;
  display: flex;
  flex-direction: column; 
  align-items: center;
}

#grid2x2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: orange;
  width: 80%;
  justify-content: center;
}

.box {
  display: flex;
  flex-basis: calc(50% - 20px);
  margin: 5px;
  justify-content: center;
  padding-top: 5%;
  overflow: hidden;
}

<div id={styles.rowTwo}>
  <Heading title="My Title"/>
  <div id={styles.grid2x2}>
    <div id={styles.boxOne} className={styles.box}>
        <DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[0]}/>
    </div>
    <div id={styles.boxTwo} className={styles.box}>
        <DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[1]}/>
    </div>
    <div id={styles.boxThree} className={styles.box}>
        <DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[2]}/>
    </div>
    <div id={styles.boxFour} className={styles.box}>
        <DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[3]}/>
    </div>
  </div>
</div>

我面临的问题是一个盒子扩展到一行中最大内容的高度。

这是一张概述我的问题的图片:

有谁知道我怎样才能做到这一点？

Answer 1

您可以在 CSS 中执行此操作，方法是使用 padding-top 添加高度，然后使用绝对定位将您的内容绘制在此填充之上。

这是一个例子:https://codepen.io/anon/pen/xpwooz

#grid2x2 {
    display: flex;
    flex-wrap: wrap;
    background-color: orange;
}

.box {
    display: flex;
    flex-basis: calc(50% - 20px);
    margin: 5px;
    justify-content: center;
    overflow: hidden;
    background: red;
    padding-top: 100px;
    position: relative;
}

.content {
  position: absolute;
  background: green;
  top: 0;
  width: 100%;
}    

问题是您不能根据内容高度动态更改此高度。您可以将其设置为固定大小或将其设置为百分比并根据其父宽度更改大小。如果您希望根据最大的内容元素更改高度，我认为您需要使用 javascript。