Css 嵌套列流动flexbox宽度收缩

Css 嵌套列流动flexbox宽度收缩,css,flexbox,Css,Flexbox,我正在努力设计一款带有嵌套colmun Flow flexbox的popover。我的问题是,当“第二级”flexbox包装时,出于某种原因,它会保持其初始宽度,因此会溢出 在我看来,问题出在“垂直”轴上,唯一可能对此产生影响的属性是“对齐项”。但我尝试了所有可能的组合,但都没有成功。 为包装设置一个固定的宽度是可行的,但是它不再响应了。小提示:输入的数量是动态的,事先未知 下面是我想做的一把小提琴: *{ 保证金:0; } 标签{ 显示:块; 利润率:0.10px; } 氢{ 边缘底部:10p

我正在努力设计一款带有嵌套colmun Flow flexbox的popover。我的问题是,当“第二级”flexbox包装时,出于某种原因,它会保持其初始宽度,因此会溢出

在我看来,问题出在“垂直”轴上,唯一可能对此产生影响的属性是“对齐项”。但我尝试了所有可能的组合,但都没有成功。
为包装设置一个固定的宽度是可行的,但是它不再响应了。小提示:输入的数量是动态的,事先未知

下面是我想做的一把小提琴:
*{
保证金:0;
}
标签{
显示:块;
利润率:0.10px;
}
氢{
边缘底部:10px;
}
输入{
右边距:10px;
}
按钮[类型=提交]{
flex:0自动;
自我对齐:结束;
}
波弗先生{
背景:rgba(0,0,0,0.5);
位置:固定;
排名:0;
右:0;
底部:0;
左:0;
显示器:flex;
}
.popover内容{
背景:白色;
保证金:自动;
最大高度:90vh;
最大宽度:90vw;
填充:10px;
边界半径:10px;
显示器:flex;
柔性流动:柱状nowrap;
}
.表格{
显示器:flex;
柔性流动:柱状nowrap;
最小高度:0;
}
.包装纸{
最小高度:0;
flex:1自动;
显示器:flex;
柔性流:柱包裹;
}

标题
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
去

我对您的源代码做了一些编辑。请看一看。我删除了不必要的
flex
定义

标签{
利润率:0.10px;
}
氢{
边缘底部:10px;
}
输入{
右边距:10px;
}
按钮[类型=提交]{
flex:0自动;
自我对齐:结束;
}
波弗先生{
背景:rgba(0,0,0,0.5);
位置:固定;
排名:0;
右:0;
底部:0;
左:0;
}
.popover内容{
背景:白色;
保证金:自动;
最大高度:90vh;
最大宽度:90vw;
填充:10px;
边界半径:10px;
}
.包装纸{
flex:1自动;
显示器:flex;
柔性包装:包装;
}

标题
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
去

这是您想要的显示器吗? 删除元素内的wrap属性:.wrapper

*{
保证金:0;
}
标签{
显示:块;
利润率:0.10px;
}
氢{
边缘底部:10px;
}
输入{
右边距:10px;
}
按钮[类型=提交]{
flex:0自动;
自我对齐:结束;
}
波弗先生{
背景:rgba(0,0,0,0.5);
位置:固定;
排名:0;
右:0;
底部:0;
左:0;
显示器:flex;
}
.popover内容{
背景:白色;
保证金:自动;
最大高度:90vh;
最大宽度:90vw;
填充:10px;
边界半径:10px;
显示器:flex;
柔性流动:柱状nowrap;
}
.表格{
显示器:flex;
柔性流动:柱状nowrap;
最小高度:0;
}
.包装纸{
最小高度:0;
flex:1自动;
显示器:flex;
弯曲方向:立柱;
溢出:自动;
}

标题
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
样本值
去
您可以尝试此代码
包装器类将flex-flow:column wrap更改为flex-flow:wrap


* {
保证金:0;
}
标签{
显示:块;
利润率:0.10px;
}
氢{
边缘底部:10px;
}
输入{
右边距:10px;
}
按钮[类型=提交]{
弹性:0 a