容器缩小时缩小长选择/文本框输入的宽度

Question

下面的示例 sn-p 生成如下布局：

这里的问题是当青色内容太宽时，它会增加父 div 的大小，但我想要发生的是它减小左下 div 的宽度，结果是这样的：

左下角的输入在一个表格中，特别是：

• 选择输入包含一个长选项，因此它的默认大小相当宽，并且
• 文本框输入默认大小只是...宽。

这都是使用弹性布局。我想通过仅缩小输入的宽度来缩小左下角（标签列应该保持不变）。

有没有办法可以限制输入大小，使下半部分的总宽度永远不会超过上半部分的总宽度（黄色）？基本上我希望整个东西是黄色框的宽度，如果右下角太宽，左下角的 div 会缩小。

我确实不提前知道黄色/蓝色内容的大小，它们都是动态生成的。我所知道的是黄色的足够宽，可以舒适地容纳底部的所有东西，假设我可以稍微缩小输入。

如果需要，我愿意用 flex div 替换该表格，只是表格更容易为下面的表格布局。

var state = true;
window.setInterval(function () {
  document.getElementById('example-stuff2').style.width = (state ? '10px' : '100px');
  state = !state;
}, 2000);

div { border: 1px solid red; }

#content, #panel, #bottom { display: flex; }
#content, #panel { flex-direction: column; }
#content { align-items: center; }
#bottom-right { flex-grow: 1; }

/* Example placeholders for content of unknown size. */
span { display: inline-block; }
#example-stuff1 { background: yellow; width: 300px; height: 120px; }
#example-stuff2 { background: cyan; width: 100px; height: 10px; }

<div id="content">
  <div id="panel">
    <div id="top"><span id="example-stuff1"></span></div>
    <div id="bottom">
      <div id="bottom-left"> 
        <table>
        <tr><td>Label:
            <td>
              <select>
                <option>Option 1</option>
                <option>Option 2 is a pretty long one</option>
                <option>Option 3</option>
              </select>
        <tr><td>Label:
            <td><input type="textbox" value="example">
        </table> 
      </div>
      <div id="bottom-right"><span id="example-stuff2"></span></div>
    </div>
  </div>
</div>

（注意：青色部分的宽度提前是未知的，但是一旦页面被渲染它就不会改变（不像sn-p）。它可能很窄（在这种情况下一切都适合）或者可能有点太宽（在这种情况下我会遇到需要缩小输入的问题）。sn-p 中的动画只是为了说明这个问题的两种情况，实际上青色内容是在提供页面时确定的并保持这种状态。）

Answer 1

有没有办法可以限制输入大小，使下半部分的总宽度永远不会超过上半部分的总宽度（黄色）？基本上我希望整个东西是黄色框的宽度，如果右下角太宽，左下角的 div 会缩小。

黄色元素 (#example-stuff1) 的定义宽度为 300 像素。

这个元素是#top 的子元素，它是#bottom 的兄弟元素——你的问题元素——没有定义的宽度。

此外，没有一个容器具有定义的宽度。

因此，#bottom 没有宽度限制，因为它与 #top 没有宽度关联，并且其祖先都没有宽度限制（超出适用于所有块级元素的标准 width: 100%） .

所以我的第一个建议是定义一个绑定两行宽度的宽度。

在下一步中，您可以使用 flexbox 来布局表单元素。

您还需要注意default minimum size of flex items，这需要使用min-width: 0 覆盖。

var state = true;
window.setInterval(function () {
  document.getElementById('example-stuff2').style.width = (state ? '10px' : '100px');
  state = !state;
}, 2000);

#bottom-left {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

#bottom-left > label {
  flex: 0 0 20%;
  margin: 5px;
}

#bottom-left > select,
#bottom-left > input {
  flex: 1 0 65%;
  min-width: 0;
  margin: 5px;
}

div {
  border: 1px solid red;
}

#content, #panel, #bottom {
  display: flex;
  width: 300px;
}

#content, #panel {
  flex-direction: column;
}

#content {
  align-items: center;
}

#bottom-right {
  flex-grow: 1;
}


/* Example placeholders for content of unknown size. */

span {
  display: inline-block;
}

#example-stuff1 {
  background: yellow;
  width: 100%;
  height: 120px;
}

#example-stuff2 {
  background: cyan;
  width: 100px;
  height: 10px;
}

<div id="content">
  <div id="panel">
    <div id="top"><span id="example-stuff1"></span></div>
    <div id="bottom">
      <div id="bottom-left">
        <label>Label:</label>
        <select>
          <option>Option 1</option>
          <option>Option 2 is a pretty long one</option>
          <option>Option 3</option>
        </select>
        <label>Label:</label>
        <input type="textbox" value="example">
      </div>
      <div id="bottom-right"><span id="example-stuff2"></span></div>
    </div>
  </div>
</div>

jsFiddle