Javascript 使父对象的高度等于其一个子对象的高度

我试图使粉红色的“

#images wrap

”与主图像具有相同的高度。每当右侧有太多的小翻滚图像时，它会将粉红色的

div

的

height

推到主图像上方。如果我可以让它匹配它的高度，那么我可以使用

溢出隐藏

不显示下面多余的滚动图像，并使用溢出作为滚动-y，以便可以向下滚动查看多余的小图像

显示为表格不起作用-您可能认为一个简单的子项

div

和隐藏溢出就可以了，但是您不能，因为您不能设置高度，否则图像纵横比将无法调整大小。图像必须保持其

3:2的纵横比

此解决方案中的javascript无法工作，因为它可能无法获取图像的高度。我还尝试获取子图像的高度，但也失败了

有谁知道能达到这个目的的魔术吗

非常感谢您的帮助，谢谢

#图像换行{
宽度：50%；
高度：自动；
边缘顶部：25px；
浮动：左；
显示器：flex；
背景：红色；
最大高度：150像素；
}
#细节包装{
宽度：100%；
高度：325px；
浮动：左；
文本对齐：右对齐；
位置：相对位置；
}
#主图像{
宽度：80.5%；
浮动：左；
背景尺寸：封面！重要；
背景位置：中-中！重要；
高度：自动；
}
#主图像>img{
显示：块；
宽度：100%；
高度：自动；
保证金：0；
}
#图像拇指{
宽度：17.5%；
高度：自动；
浮动：左；
左缘：2%；
溢出y：滚动！重要；
/*使其仅在超过主图像高度时滚动*/
/*最大高度：400px；使其成为#主图像的高度*/
}
.图像拇指{
边缘底部：6px；
背景位置：中心；
背景尺寸：封面；
高度：自动；
}
.图像拇指：类型的最后一个{
页边距底部：0；
}
.image thumb>img{
高度：自动；
宽度：100%；
}

//如果少于5个拇指，则隐藏溢出滚动
var thumbs=document.getElementsByClassName（'image-thumb'）；
var thumbsWrap=document.getElementById（'image-thumbs'）；
如果（拇指长度<5）{
thumbsWrap.style.overflow='hidden'；
}
//使“#图像拇指”不超过“#主图像”的高度
var mainImgHeight=document.getElementById（'main-image-sizer'）.style.height；
var imageThumbsInitialHeight=document.getElementById（'image-thumbs'）.style.height；
如果（imageThumbsInitialHeight>mainImgHeight）{
document.getElementById（'image-thumbs'）。style.height=maingheight；
}

您可以在主容器上使用

display:flex

：

#图像换行{
宽度：100%；
高度：自动；
边缘顶部：25px；
浮动：左；
显示器：flex；
}
#细节包装{
宽度：100%；
高度：325px；
浮动：左；
文本对齐：右对齐；
位置：相对位置；
}
#主图像{
宽度：80.5%；
浮动：左；
背景尺寸：封面！重要；
背景位置：中-中！重要；
高度：自动；
}
#主图像>img{
显示：块；
宽度：100%；
高度：自动；
保证金：0；
}
#图像拇指{
宽度：17.5%；
高度：自动；
浮动：左；
左缘：2%；
溢出y：滚动！重要；
/*使其仅在超过主图像高度时滚动*/
/*最大高度：400px；使其成为#主图像的高度*/
}
.图像拇指{
边缘底部：6px；
背景位置：中心；
背景尺寸：封面；
高度：自动；
}
.图像拇指：类型的最后一个{
页边距底部：0；
}
.image thumb>img{
高度：自动；
宽度：100%；
}

//如果少于5个拇指，则隐藏溢出滚动
var thumbs=document.getElementsByClassName（'image-thumb'）；
var thumbsWrap=document.getElementById（'image-thumbs'）；
如果（拇指长度<5）{
thumbsWrap.style.overflow='hidden'；
}
//使“#图像拇指”不超过“#主图像”的高度
var mainImgHeight=document.getElementById（'main-image-sizer'）.style.height；
var imageThumbsInitialHeight=document.getElementById（'image-thumbs'）.style.height；
如果（imageThumbsInitialHeight>mainImgHeight）{
document.getElementById（'image-thumbs'）。style.height=maingheight；
}

您可以在主容器上使用

display:flex

：

#图像换行{
宽度：100%；
高度：自动；
边缘顶部：25px；
浮动：左；
显示器：flex；
}
#细节包装{
宽度：100%；
高度：325px；
浮动：左；
文本对齐：右对齐；
位置：相对位置；
}
#主图像{
宽度：80.5%；
浮动：左；
背景尺寸：封面！重要；
背景位置：中-中！重要；
高度：自动；
}
#主图像>img{
显示：块；
宽度：100%；
高度：自动；
保证金：0；
}
#图像拇指{
宽度：17.5%；
高度：自动；
浮动：左；
左缘：2%；
溢出y：滚动！重要；
/*使其仅在超过主图像高度时滚动*/
/*最大高度：400px；使其成为#主图像的高度*/
}
.图像拇指{
边缘底部：6px；
背景位置：中心；
背景尺寸：封面；
高度：自动；
}
.图像拇指：类型的最后一个{
页边距底部：0；
}
.image thumb>img{
高度：自动；
宽度：100%；
}

//如果少于5个拇指，则隐藏溢出滚动
var thumbs=document.getElementsByClassName（'image-thumb'）；
var thumbsWrap=document.getElementById（'image-thumbs'）；
如果（拇指）