Html CSS FlexBox-拉伸子对象而不是父对象？

我有一个DIV，它有一个子DIV，显示在hover上

因为我使用的是“可见性：隐藏”，所以在显示隐藏的div时，该div不会拉伸，其父div也不会拉伸

我正在努力实现的目标：

父div不应拉伸

子div（包含隐藏的div）应该拉伸

使用CSS而不定义静态宽度是否可能

代码笔：

.第页{
弯曲方向：立柱；
显示器：flex；
对齐项目：居中；
}
.家长{
利润上限：4倍；
填充物：5px；
弯曲方向：立柱；
显示器：flex；
对齐项目：居中；
边框：2件纯黑；
}
.孩子{
利润上限：4倍；
边框：1px纯黑；
弯曲方向：立柱；
显示器：flex；
}
.儿童小组{
可见性：隐藏；
}
.child:悬停.child子对象{
能见度：可见；
}
我不希望父div在子悬停时调整大小，但子div应该调整大小。这可以通过CSS实现吗？
上级部门
子div（悬停以显示隐藏div）
子菜单

为了使该工作具有响应性，我建议您将

子子子项

移动到

子项

之外，然后结合

可见性：隐藏/可见

，使用负上边距（隐藏

子项

的边框），您可以直观地完成该操作

堆栈片段

.page{
弯曲方向：立柱；
显示器：flex；
对齐项目：居中；
}
.家长{
利润上限：4倍；
填充物：5px；
弯曲方向：立柱；
显示器：flex；
对齐项目：居中；
边框：2件纯黑；
}
.孩子{
宽度：100%；
框大小：边框框；
利润上限：4倍；
边框：1px纯黑；
弯曲方向：立柱；
显示器：flex；
}
.儿童小组{
宽度：100%；
边框：1px纯黑；
边框顶色：白色；
页边顶部：-1px；
框大小：边框框；
可见性：隐藏；
}
.子对象：悬停，
.子项：悬停+子项子项{
能见度：可见；
显示器：flex；
}

我不希望父div在子悬停时调整大小，但子div应该调整大小。这可以通过CSS实现吗？
上级部门
子div（悬停以显示隐藏div）
子菜单

我看不出您试图对示例执行什么操作：您正在切换可见性的元素已经小于子元素，因此它根本不会影响布局。您希望子div的行为如何？它应该如何调整大小？收缩？它不会影响，因为可见性设置为“隐藏”。如果可见性为“display:none”，则会同时拉伸子div和父div。请参阅：子div应该像本例中那样拉伸：。但是父级不应该。您的解决方案的问题是子div超出了其父级的边界。我不希望父项在悬停时拉伸，但当页面加载时，它需要足够宽才能包含子菜单。@DavidSomekh首先，你说父项不应在悬停时拉伸，现在你说解决方案的问题是子div超出了父项的边界，这对我来说是矛盾的。发布一个非悬停和一个悬停图像/图形，精确显示它应该是什么样子。。。第二，但当页面加载时，它需要足够宽才能包含子菜单。这是否意味着子菜单可以比子菜单和/或父菜单宽，并且他们应该根据子菜单中的内容调整其宽度？@DavidSomekh同样，当你说父菜单不应该拉伸时，你是指它的边框吗，或者，您的意思是，如果在父级之后呈现内容，则不应将其向下推，而应与子菜单重叠？下面是它的外观（不定义静态高度，如示例所示）：-如您所见，子级正在拉伸，而父级没有。谢谢@DavidSomekh更新了我的答案

<style>

.page{
flex-direction:column;
display:flex;
align-items:center;
}

.parent{
margin-top:4px;
padding:5px;
flex-direction:column;
display:flex;
align-items:center;
border:2px solid black;
}

.child{
margin-top:4px;
border:1px solid black;
flex-direction:column;
display:flex;
}

.child-sub{
visibility:hidden;
}

.child:hover .child-sub{
visibility:visible;
}
</style>


<div class="page">
I want the parent div to NOT resize on child hover but the child div should resize. Can this be done with CSS?
    <div class="parent">Parent-div
        <div class="child">Child-div (Hover to display hidden div)
            <div class="child-sub">Sub-menu</div>
        </div>
    </div>
</div>