如何阻止 React 中多列中的元素溢出？答案

【问题标题】：How to stop overflow of elements in a multi column in React?如何阻止 React 中多列中的元素溢出？
【发布时间】：2020-08-22 07:34:15
【问题描述】：

我创建了一个包含 2 列的表单，如下所示：

学生姓名是必填字段。因此，当需要一个空输入时，它会抛出一个标记为 Required 的红色文本。问题是，当这种情况发生时，标记为Student name: 的字段名称会出现在另一列中，如下所示。

这是我的 css。

.formLayout{
  column-count: 2;
  column-gap: 5%;
}

有没有办法防止这种情况只使用 .css 或任何变通方法来实现？

【问题讨论】：

【解决方案1】：

你能设置行的最小高度吗？

如果有机会输出错误信息，应该有更多空间。

类似：

display: grid;
grid-template: repeat(2, 100px) / 50% 50%;
column-gap: 5%;

【讨论】：