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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在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;
}

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

https://jsfiddle.net/y7d7Ldur/

答案

这是因为输入的默认宽度大于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>
另一答案

你可以给div一个max-width并用width: 0;上的input激活flex

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>
另一答案

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

你可以这样做:

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

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

以上是关于如何在Flexbox内部输入可用空间? [重复]的主要内容,如果未能解决你的问题,请参考以下文章

设置flexbox中项目的初始宽度[重复]

嵌套的 Flexbox 100% 高度在 Safari 中不起作用 [重复]

Flexbox垂直填充可用空间

如何使用 Bootstrap 4 flexbox 填充可用内容?

flexbox布局

Flexbox - 填充剩余空间[重复]