当超过父高度时，如何匹配同级高度

可以通过以下几种方式实现：

使用CSS的Flexbox布局：Flexbox是一种弹性盒子布局模型，可以轻松实现元素的自适应布局。通过设置父元素的display属性为flex，然后设置子元素的flex属性为1，即可使子元素自动填充剩余空间，实现同级高度匹配。具体代码如下：

.parent {
  display: flex;
}

.child {
  flex: 1;
}

使用CSS的Grid布局：Grid布局是一种二维网格布局模型，可以更精确地控制元素的布局。通过设置父元素的display属性为grid，并使用grid-template-rows属性设置子元素的行高，即可实现同级高度匹配。具体代码如下：

.parent {
  display: grid;
  grid-template-rows: 1fr;
}

.child {
  /* 可以设置其他样式 */
}

使用JavaScript动态计算高度：如果以上CSS方法无法满足需求，可以使用JavaScript来动态计算元素的高度，并将高度应用到同级元素上。具体代码如下：

var parent = document.querySelector('.parent');
var children = document.querySelectorAll('.child');

var maxHeight = 0;
for (var i = 0; i < children.length; i++) {
  var height = children[i].offsetHeight;
  if (height > maxHeight) {
    maxHeight = height;
  }
}

for (var i = 0; i < children.length; i++) {
  children[i].style.height = maxHeight + 'px';
}

以上是三种常见的实现同级高度匹配的方法，根据具体情况选择适合的方法即可。