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。