Question

下面的示例代码段会生成如下布局：

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

左下角的输入位于表格中，特别是：

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

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

有没有办法可以限制输入尺寸，永远不会导致下半部分的总宽度超过上半部分的总宽度（黄色）？基本上我希望整个事物是黄色框的宽度，而左下角的div则是如果右下方太宽则收缩的那个。

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

如果需要的话，我愿意用flex div替换那个表格，只是表格更容易为那里的表格布局。

＆＃13;

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

＆＃13;

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; }

＆＃13;

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

＆＃13;

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

Answer 1

有没有办法可以限制输入尺寸，永远不会导致下半部分的总宽度超过上半部分的总宽度（黄色）？基本上我希望整个事物是黄色框的宽度，而左下角的div则是如果右下方太宽则收缩的那个。

黄色元素（#example-stuff1）的定义宽度为300px。

此元素是#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>

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

1 个答案:

jsFiddle