将inline-flex元素调整为屏幕宽度

Question

在下面的图片中，您可以看到里面有三个div（绿色背景）的div（红色背景），每个div都有一个标签（蓝色背景）和一个控件（输入或复选框）。

在图像中，您可以看到绿色div如何调整到屏幕大小，当它们达到最小尺寸并且不再适合它们向下移动的线时，问题是（正如您在第三个窗口中看到的那样） ）由于它们的最小尺寸属性，它们在不同的行中看起来很糟糕，我想要做的是让它们在向下移动时占据屏幕的100％。

我希望我能正确解释。

顺便说一句，我不想​​使用插件，所以如果只有HTML，CSS和Javascript这样做我会非常高兴。

非常感谢你提前。

这是我的代码：

.controlRow
{
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0px;
    margin: 0px;
    background-color: Red;
}

.controlColumn1-2, .controlColumn1-4, .controlColumnCheckbox
{
    display: inline-flex;
    background-color: green;
}

.controlColumn1-2      { width: 50%;    min-width: 300px; }
.controlColumn1-4      { width: 25%;    min-width: 300px; }
.controlColumnCheckbox { width: 230px; }

.controlColumn1-2 label, .controlColumn1-4 label, .controlColumnCheckbox label
{
    margin-right: 5px;
    min-width: 100px;
    background-color: blue;
}

.controlColumn1-2 input, .controlColumn1-4 input
{
    margin-right: 5px;
    width: 100%;
}

.controlColumnCheckbox input
{
    margin-left: 105px;
    margin-right: 5px;
    width: 14px;
}

<div class = "controlRow">
  <div class = "controlColumn1-4">
    <label id="lblNombre">Nombre:</label>
    <input type="text" id="txtNombre" maxlength="100" />
  </div>
  <div class = "controlColumn1-2">
    <label id="lblDescripcion">Descripcion:</label>
    <input type="text" id="txtDescripcion" maxlength="100" />
  </div>
  <div class = "controlColumn1-4">
    <div class = "controlColumnCheckbox">
      <input type="checkbox" id = "checkActivo" checked="checked" />
      <label id="lblActivo">Activo.</label>
    </div>
  </div>
</div>

Answer 1

而不是：

.controlColumn1-2  { width: 50%; min-width: 300px; }
.controlColumn1-4  { width: 25%; min-width: 300px; }

试试这个：

.controlColumn1-2 {  flex: 2 0 300px; }
.controlColumn1-4 {  flex: 1 0 300px; }

DEMO

详细了解flex property at MDN。

也是一个很好的参考：Common Values of Flex