页面缩放时leftCardapio容器内元素尺寸异常增大问题求助

问题表现：页面放大（zoom in）时，leftCardapio容器内的元素高度和宽度异常增大，超出预期布局范围。

问题根源 #

1. 定位基准错误：.itemCardapio未设置position: relative，导致.leftCardapio的绝对定位会向上查找最近的带定位父元素（即.left），缩放时margin-left:100%的计算逻辑混乱，引发偏移和尺寸异常。
2. 固定尺寸缺乏弹性：.leftCardapio使用固定宽度250px，内部子元素使用固定高度80px，页面缩放时无法适配视窗比例，导致布局溢出或元素变形。

修复步骤及代码修改 #

1. 修正父元素定位基准 #

给.itemCardapio添加相对定位，确保子元素的绝对定位基于该容器：

.itemCardapio {
    /* 保留原有属性，新增以下行 */
    position: relative;
}

2. 调整leftCardapio的定位与宽度 #

将margin-left:100%改为left:100%，同时用相对单位优化宽度，兼顾固定最大宽度限制：

.itemCardapio:hover>.leftCardapio {
    display: flex;
    flex-direction: column;
    background-color: white;
    text-align: center;
    position: absolute;
    left: 100%; /* 替换margin-left:100%，定位更精准 */
    top: 0;
    width: 20vw; /* 用视窗宽度比例适配缩放 */
    max-width: 250px; /* 保留最大宽度，避免过宽 */
    height: 100%;
}

3. 让内部子元素自适应高度 #

移除固定高度80px，改用flex布局平分容器高度，确保缩放时始终填满容器：

.itemPratos,
.itemSaladas,
.itemSopas,
.itemSobremesas,
.itemMolhos,
.itemPorcoes {
    /* 移除height:80px */
    flex: 1; /* 每个子元素平分容器高度 */
    width: 100%;
    background-color: lightgray;
    border-bottom: 3px solid white;
    /* 可选：方便后续内部内容居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

4. 同步修复leftBebidas的相同问题 #

.leftBebidas存在完全相同的定位和尺寸问题，同步修改：

.itemBebidas {
    position: relative;
}

.itemBebidas:hover>.leftBebidas {
    display: flex;
    flex-direction: column;
    background-color: white;
    text-align: center;
    position: absolute;
    left: 100%;
    top: 0;
    width: 20vw;
    max-width: 250px;
    height: 100%;
}

.itemBebida1 {
    flex: 1;
    width: 100%;
    background-color: lightgray;
    border-bottom: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

修复原理 #

• 相对定位的父元素为绝对定位子元素提供了精准的布局基准，left:100%始终指向父元素右侧边缘，缩放时不会出现偏移。
• vw相对单位让侧边栏宽度随视窗缩放比例自适应，结合max-width避免过度拉伸。
• flex布局平分高度，确保内部元素始终填满容器，不会因固定高度在缩放时出现溢出或空白。

内容的提问来源于stack exchange，提问作者Paulo Paiva