Html CSS3：嵌套的flexbox表单会弄乱间距

我正在尝试制作一个标签和输入在同一行的flexbox表单。使用flex basis和其他flex属性可以得到预期的结果

但是，如果必须将flexbox嵌套在另一个具有设置宽度的元素中，那么整个过程就会崩溃

例如，查看所附的小提琴，并在使用和不使用

div{width:30%}

我怎样才能避开这件事

---

您可以添加

宽度：100%以形成div

您正试图使
flexbox
表现为网格/表格，但由于它不是为此而设计的，因此您需要通过设置一些约束来帮助它，如
最小宽度
，尽管如您所述，您不希望这样，请使用适当的显示类型

由于CSS网格仍然没有合理的浏览器支持，下面是第二个最好的CSS表


div.lesswide{
宽度：30%；
边缘顶部：20px；
}
形式{
显示：表格；
宽度：100%；
}
表格组{
显示：表格行；
}
表格标签{
显示：表格单元格；
宽度：30%；
}
表单输入{
显示：表格单元格；
宽度：60%；
}

A.
长的
稍长
中间
A.
长的
稍长
中间
试试这个灵活的
flexbox表单


@导入url（“https://fonts.googleapis.com/css?family=Open+Sans:300800“；
* {
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体系列：“开放式Sans”、helvetica、Sans serif；
字体大小：24px；
颜色：rgba（0,0,0,0.5）；
}
身体{
背景#f9f9f9；
}
主要{
位置：相对位置；
宽度：100%；
}
h1{
填充：20px0；
字号：600；
字号：4rem；
}
h1，
h5{
文本对齐：居中；
}
h5{
利润率：0.20px；
}
.尺子{
位置：相对位置；
显示：块；
左：50%；
利润率：0.30px-320 px；
宽度：640px；
高度：6px；
线高：-20px；
背景：rgba（0,0,0,0.1）；
}
.尺幅{
显示：块；
位置：绝对位置；
填充：8px；
宽度：80px；
顶部：-22px；
左：280px；
文本对齐：居中；
背景：#efef；
}
文本区，
输入{
显示：内联块；
字体系列：“开放式Sans”、helvetica、Sans serif；
利润率：10px；
填充：10px；
背景：rgba（255，255，255，0.8）；
边框：2倍实心rgba（0,0,0,0.1）；
边界半径：4px；
字号：1rem；
字体大小：300；
颜色：#4545；
}
文本区域：焦点，
输入：焦点{
大纲：0；
}
文本区{
高度：300px；
}
.柔性父母{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
最大宽度：800px；
保证金：0自动；
-ms flex流：行换行；
柔性流：行换行；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-ms柔性线组件：开始；
调整内容：灵活启动；
}
.弹性物品{
-webkit-box-flex:1；
-ms-flex:10300px；
flex:10300px；
}

弹性形式
大小窗口
640像素
给该div一个背景，您就可以看到内容是如何溢出的。从
min-width
开始：@misterManSam，如果你弄乱了
min-width
，它只会选择
width:30%
。我不想手动设置宽度……这并没有改变任何内容。最后一次跟进。如果我指定
input[type=text]
，然后尝试在同一行中添加两个按钮（1 30%其他70%），为什么它们只停留在左侧@Sumnon把那段代码放在一把小提琴上，我来看看。。。。我还建议我们删除以上所有评论，因为它们不会为未来用户添加任何内容，同意吗？同意。Th fiddle在前面的评论中：）@SumNeuron好吧，表单元素真的不喜欢这样，所以包装它们实际上是正确的方式：@SumNeuron用第2个示例更新了我的答案