如何使所有子项在 flexbox 中的高度与改变其高度的子项相同？

Question

这就是我的问题的样子：https://ibb.co/x7QbBvY。在某些断点后调整大小时，每个矩形都会发生这种情况。整行是 flexbox，它被分隔在接下来的两个 flexbox 中，这两个 flexbox 又包含 2 个 flexbox。所有子元素的高度：100%。

我设法通过引导行和列轻松地完成这项工作，但我现在只想用 css 来完成这项工作。 我想到的唯一两件事是进行很少的媒体查询，只是改变高度，但这似乎效率很低。 第二个是使用 JS 将孩子的大小更改为最高的，但这似乎也效率低下。孩子们改变尺寸是因为

标签长度。

<div class="mainDiv">
    <div class="row-first">
        <div class="two-statPill">
            <div class="statPill">
                <div class="pill-left">
                    <span>Highest expense</span>
                    <p class="pillAmount">@Model.PillsStats[0].AmountInt$</>
                </div>
                <div class="pill-right">
                    <p>@Model.PillsStats[0].Category</p>
                    <p>@Model.PillsStats[0].DatetimeString</p>
                    <p>@Model.PillsStats[0].Percentage% of @Model.CirclesStats[0].SumLast30Days$</p>
                </div>
            </div>
            <div class="statPill">
                <div class="pill-left">
                    <span>Last expense</span>
                    <p class="pillAmount">@Model.PillsStats[1].AmountInt$</p>
                </div>
                <div class="pill-right">
                    <p>@Model.PillsStats[1].Category</p>
                    <p>@Model.PillsStats[1].DatetimeString</p>
                    <input id="percentageArrowValue" type="hidden" value="@Model.PillsStats[1].Percentage" />
                    <p style="text-align:center;"><i id="arrowUp" hidden class="fas fa-arrow-up"></i><i id="arrowDown" hidden class="fas fa-arrow-down"></i><span id="arrowPercentage"> @Model.PillsStats[1].Percentage% </span><span> average</span></p>
                </div>
            </div>
        </div>
        <div class="two-statPill">
            <div class="statPill">
                <div class="pill-left">
                    <span>Lowest expense</span>
                    <p class="pillAmount">@Model.PillsStats[2].AmountInt$</p>
                </div>
                <div class="pill-right">
                    <p>@Model.PillsStats[2].Category</p>
                    <p>@Model.PillsStats[2].DatetimeString</p>
                    <p>@Model.PillsStats[2].Percentage% of @Model.CirclesStats[0].SumLast30Days$</p>
                </div>
            </div>
            <div class="statPill">
                <div class="pill-left">
                    <span>Lowest expense</span>
                    <p class="pillAmount">@Model.PillsStats[2].AmountInt$</p>
                </div>
                <div class="pill-right">
                    <p>@Model.PillsStats[2].Category</p>
                    <p>@Model.PillsStats[2].DatetimeString</p>
                    <p>@Model.PillsStats[2].Percentage% of @Model.CirclesStats[0].SumLast30Days$</p>
                </div>
            </div>
        </div>
     </div>
  </div>

CSS

.mainDiv {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.row-first {
    display: flex;
    align-items: center;
}
.statPill {
    border: 3px solid var(--text-primary);
    border-radius: 5px;
    background-color: var(--bg-navbar);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 48%;
    height: 100%;
    min-width: 11rem;
    padding: 0.2rem;
    margin: 0;
}
.statPill p.pillAmount {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
}
.pill-left {
  text-align: center;
}
.pill-right {
  text-align: center;
}
.pill-right p {
  margin: 5px 0;
}
.two-statPill {
  display: flex;
  height: 100%;
  width: 50%;
  align-items: center;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  height: 100%;
}

@media only screen and (max-width: 768px)
{
  .statPill {
    margin-bottom: 0.5rem;
    width: 100%;
  }
  .row-first {
    flex-direction: column;
  }
}
@media only screen and (max-width: 980px)
{
  .two-statPill {
    flex-direction: column;
    width: 100%;
  }
  .statPill {
    width: 98%;
    margin: 0.2rem 0;
  }
}

Answer 1

通过将 css 属性 align-items 设置为拉伸 align-items:stretch ，这是该属性的默认值，如果 flex 方向是 column，则将子元素的宽度设置为 100%，如果方向是 row，则将子元素的高度设置为 100%