Html 如何将我的Flex box导航调整到更小的高度，以便移动设备使用

所以我有一个简单的flexbox布局，由一个父元素组成，其中包含两个子元素。第一个子元素（.child1）代表我的菜单，它在左边，占据了我视口的0.125左右，并且跨越了父元素的整个高度。第二个子元素（.child2）表示我的内容，它占据了页面的剩余宽度

我已经将它设置为当视口收缩到某个点时。child2点击它的flex基础400px，它在下面包装，页面布局变成一个psuedo“column”样式的布局。当.child2包装时，我希望.child1的高度缩小到50px，或者更适合移动导航的高度。然而，在我的代码中，当视口缩小到移动大小时，两个子元素占据的高度相等

如何收缩.child1的高度（当元素正在包装时），但在元素未包装时具有全高

*如果可以在没有媒体查询的情况下做到这一点，那将是理想的

.parentContainer{
显示器：flex；
柔性包装：包装；
背景颜色：浅珊瑚；
填充：20px；
高度：100vh；
最大宽度：100vw；
对齐内容：拉伸；
对齐项目：拉伸；
调整内容：灵活启动；
}
.儿童1{
背景色：暗绿色；
柔性：2 100px；
}
.儿童2{
背景色：淡蓝色；
flex:201400px；
}

这很简单

将弹性基准从px更改为%

例如：

.child1 {
background-color: DarkTurquoise;
flex: 2 2 25%;
}

.child2 {
background-color: DodgerBlue;
flex: 20 1 75%;
}

然后添加这个简单的媒体查询

@media (max-width:768px) {
.parentContainer{  flex-direction: column}
}

@media (max-width:768px) {
.child1{  
flex-basis: 50%
}
.child2{  
flex-basis: 50%
}
 }

这将交换东西，但保持相似的比例

当然，如果您决定在移动设备上安装更大或更小的导航设备

您可以将以下内容添加到媒体查询中

@media (max-width:768px) {
.parentContainer{  flex-direction: column}
}

@media (max-width:768px) {
.child1{  
flex-basis: 50%
}
.child2{  
flex-basis: 50%
}
 }

---

Javascript解决方案是检测子元素是否改变大小，但这有点过时，请花一些时间学习CSS媒体查询，我非常确定，当您遇到断点时，您将不得不使用媒体查询作为一个属性或两个属性需要更改其值。你为什么反对媒体的质疑？@hungerstar我并不反对他们，我只是想知道，如果没有他们，这一切是否可以实现。这似乎是可能的，我只是想尽量减少我的代码。谢谢你的帮助！