Question

我似乎无法让我的文字输入更短...... 这让我的按钮被视为切割。

（我使用overflow: hidden，因为我不希望外部div增长。）

我在这里缺少什么？

＆＃13;

<div style="max-width:105px; display:flex; overflow: hidden;">
    <div class="" style="flex:1; display:flex">
       <input style="flex:2; min-width:0px" >
       <button style="flex:2; min-width:0px">
    </div>
</div>

＆＃13;

https://jsfiddle.net/2xapnu9k/

Answer 1

那是因为有一个循环定义：

#inner-wrapper的大小取决于输入的大小和通过min-width: auto的按钮。
输入和按钮的大小取决于#inner-wrapper通过弹性属性的大小。

因此，#inner-wrapper的大小根据按钮的固有宽度和输入而定。

如果您不想这样，可以手动打破循环定义：

让#inner-wrapper忽略其内容的大小

#inner-wrapper {
  min-width: 0;
}

#outer-wrapper {
  max-width: 105px;
  display: flex;
  overflow: hidden;
}
#inner-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
}
input, button {
  min-width: 0;
  flex: 2;
}

<div id="outer-wrapper">
  <div id="inner-wrapper">
    <input />
    <button></button>
  </div>
</div>

使输入和按钮忽略其固有宽度。

input, button {
  width: 0;
}

#outer-wrapper {
  max-width: 105px;
  display: flex;
  overflow: hidden;
}
#inner-wrapper {
  flex: 1;
  display: flex;
}
input, button {
  width: 0;
  min-width: 0;
  flex: 2;
}

<div id="outer-wrapper">
  <div id="inner-wrapper">
    <input />
    <button></button>
  </div>
</div>

Answer 2

考虑将max-width应用于表单控件（demo）的父级（而不是父级）。

另请注意，弹性项目的默认最小大小是其内容的大小。解决问题的另一种方法是将min-width:0应用于您的内部div（demo）。

更多详情：https://stackoverflow.com/a/36247448/3597276

显示中的文本输入：flex div在某些点上不会变小，为什么？

2 个答案: