如何在Flexbox内部输入可用空间？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

input / button elements not shrinking in a flex container 1 answer
输入/按钮元素不在flex容器中收缩1回答

I'm trying to get the input to take all available space inside this flexbox but not extend beyond the width of the flexbox.

我正在尝试获取输入以获取此Flexbox中的所有可用空间，但不会超出Flexbox的宽度。

<div>
   <input type="number"/>
   <button>OK</button>
</div>

div
{
  display:flex;
  width:100px;
  position:relative;
  border:solid 1px #000;
}

input
{
  flex:1;
  display:block;
  border:none;
}

The problem is that the input is overflowing the containing flexbox div. If I set the input's width to 100% it seems to work in Chrome but fail in FF. How should this be done?

问题是输入溢出了包含的flexbox div。如果我将输入的宽度设置为100％，它似乎在Chrome中有效但在FF中失败。该怎么做？

https://jsfiddle.net/y7d7Ldur/

3 个解决方案

#1

This is because the input has a default width bigger than 100px. Add min-width:0 to the input to fix this:

这是因为输入的默认宽度大于100px。将min-width：0添加到输入以修复此问题：

div
{
  display:flex;
  width:100px;
  position:relative;
  border:solid 1px #000;
}

input
{
  flex:1;
  display:block;
  border:none;
  min-width:0;
}

<div>
   <input type="number">
   <button>OK</button>
</div>

#2

You can give the div a max-width and activate flex with width: 0; on input

你可以给div一个最大宽度并激活flex的宽度：0;在输入上

div {
  display: flex;
  max-width: 100px;
  position: relative;
  border: solid 1px #000;
}

input {
  display: flex;
  flex: 1 1 auto;
  border: none;
  width: 0;
}

button {
  display: flex;
  flex: 0 0 auto;
}

<div>
  <input type="number"/>
  <button>OK</button>
</div>

#3

-2

You dont need to make it a flex box.

你不需要把它变成一个弹性盒子。

you can just do this:

你可以这样做：

<div>
<input></input>
</div>

<style>
div{
width: 100px;
}
input{
min-width:100%;
margin: 0px;
}
</style>

#1