Html 如何防止flexbox垂直收缩或高度收缩

我的HTML页面中有两个并排的div：

我将外部容器弯曲，这样两个div可以并排放置，如上图所示

现在我了解到，如果一个容器是柔性的，它将根据浏览器的宽度或高度而收缩或增长，但是是否可以只让它在宽度方向或水平方向上弯曲

如上所示，如果我调整浏览器的宽度，它会相应地弯曲

然而，我现在想做的是不要让它在高度上弯曲或垂直方向弯曲，因为内容开始变得凌乱：

是否可以基于高度禁用flex属性，并允许出现滚动条

*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
身高：100%；
字体大小：1vw；
}
身体{
身高：100%；
}
#容器{
显示器：flex；
宽度：100%；
}
#首先{
边框：1px纯黑；
边界半径：5px；
宽度：35%；
高度：90vh；
左边距：10px；
}
#第二{
边框：1px纯黑；
边界半径：5px；
宽度：35%；
高度：90vh；
左边距：10px；
}
.输出实体{
身高：4%；
/*边框：1px纯黑*/
显示：网格；
网格模板列：28%45%27%；
对齐项目：居中；
利润上限：1vh；
}
.output_实体标签{
文本对齐：右对齐；
右侧填充：5px；
}

文件
名称
数量
这是一个示例文本

这是另一个示例文本

这不是Flexbox的问题，而是您的规则的问题

将

.output\u entity

的高度指定为其父级的4%

但是，当它的内容不适合这个小区域时，它会溢出，这（默认情况下）是可见的。
当溢出时，它似乎与其他元素重叠（它在视觉上是这样做的），这就是您所看到的

要解决此问题，只需从

.output\u entity

中删除行

高度：4%

如果您确实想更改元素沿次方向的布局方式（我指的是垂直于

弹性方向的方向），则可以使用属性
对齐项
及其一个选项


*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
身高：100%；
字体大小：1vw；
}
身体{
身高：100%；
}
#容器{
显示器：flex；
宽度：100%；
}
#首先{
边框：1px纯黑；
边界半径：5px；
宽度：35%；
高度：90vh；
左边距：10px；
}
#第二{
边框：1px纯黑；
边界半径：5px；
宽度：35%；
高度：90vh；
左边距：10px；
}
.输出实体{
/*边框：1px纯黑*/
显示：网格；
网格模板列：28%45%27%；
对齐项目：居中；
利润上限：1vh；
}
.output_实体标签{
文本对齐：右对齐；
右侧填充：5px；
}

文件
名称
数量
这是一个示例文本

这是另一个示例文本

感谢您指出这一点。因此，如果我想要一个更大的文本框，我应该将height和width属性指定给文本框，而不是外部的.output_实体容器？是的，您应该（在我看来）在元素本身上定义尺寸，并在父元素上定义布局。我发现它更容易调试，也不容易出错。谢谢。由于我删除了.output_实体的%高度，我想如果我想使其更高，而vw单位使其更长，那么我应该在文本框高度上使用vh单位？因为我想避免像px这样的固定单元，因为不同的笔记本电脑有不同的屏幕尺寸。你可以使用像
rem
这样的相对单元，只要你正确设置
标签，它就会缩放
rem
使用根元素的字体大小，即
。您可以尝试一下，并使用浏览器的DevTools进行模拟设备尺寸的测试！