javascript - 将 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