如何在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中失败。该怎么做?
答案
这是因为输入的默认宽度大于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 100% 高度在 Safari 中不起作用 [重复]