如何防止标签和文字框从增加和大小？

Question

我有一个页面（codepen），它同时使用了bootstrap和amp; flexbox（我有充分的理由）：

  body {
      display: flex;
      flex-direction: column;
  }  

当用户单击YES单选框时，一些JavaScript会显示另一个带有YES / NO问题的标签。当发生这种情况时，顶部的Email Address文本框即使在没有任何变化的情况下也会扩展。这是由flexbox引起的，我怀疑。 Are you a fantastic human being也被重排。

有没有办法阻止标签和文本框的大小改变？

P.S。如果有人想知道为什么我没有使用SO的代码片段实用程序，只有当“结果”页面是浏览器的完整宽度时才会出现问题，而Codepen允许您这样做。

Answer 1

我建议给.app-content一个最大宽度，以防止文本框增加大小。例如

.app-content {
  flex: 1 0 auto;
  max-width: 400px;
}

Answer 2

快速解决方法是测量表单的初始宽度（275px）并设置＆＃34; max-width＆＃34;容器对此值的影响。

.app-content {
  max-width: 275px;
  flex: 1 0 auto;
}