如何在容器内有不同项目的父容器中为子容器设置相同的高度？

Question

我正在尝试使父容器中的子容器具有相同的高度，尽管元素不同。目标是能够在没有 js 的情况下拥有一个没有固定高度的父容器，以及 3 个占据最长容器高度的子容器。你觉得可能吗？

`
<div class='wrapper'>
  <div class='item'>
    ADNAFNAFNPDASFKòSDFNSKD
    <br>
    sshdbssdhfjsdfk
    <BR>
    sdpmdè
        <BR>
    sdpmdè
  </div>
  <div class='item'>
    GFGFGFFHDJJNDHDHJ
  </div>
  <div class='item'>
    YTYTYTYGHGJTGJ
  </div>
</div>

.wrapper {
  display: flex;
  outline: 5px solid blue;
  gap: 30px;
  flex-direction: column;
}
.item {
  flex: 1;
  padding: 24px;
  background-color: red;
}

代码笔