输入/按钮元素在柔性容器中不缩小 [英] input / button elements not shrinking in a flex container

问题描述

在flex容器中使用输入和按钮元素时， flex 和/或 flex-grow 属性'b
$ b

代码证明了我的问题。

  button，input {font-size：1rem;} button {border：none; background-color：＃333;颜色：#EEE;} input {border：1px solid #AAA; padding-left：0.5rem;}。inputrow {width：30rem;显示：flex; margin：0 -.25rem;}。inputrow> * {margin：0 .25rem; border-radius：2px;身高：1.75rem; box-sizing：border-box;}。nickname {flex：1;}。message {flex：4;}。s-button {flex：1;}  

< pre class =snippet-code-html lang-html prettyprint-override> < div class =inputrow> < input type =textclass =nicknameplaceholder =Nickname> < input type =textclass =messageplaceholder =Message> < button type =submitclass =s-button> Submit< / button>< / div>

显示我期待的代码。 （使用DIV而不是输入和按钮）。

.inputrow {width：30rem;显示：flex; flex-flow：排列nowrap; margin：0 -.25rem;}。inputrow> * {margin：0 .25rem; height：1.75rem;}。nickname {flex：1; background-color：blue;}。message {flex：4; background-color：red;}。s-button {flex：1; background-color：green;}

< div class = inputrow > < div class =nickname>昵称< / div> < div class =message> Message< / div> < div class =s-button> Submit< / div>< / div>

$ b

解决方案

一个输入元素，与 div ，带有默认宽度。

以下是对此设置的一个简单说明：

浏览器自动给出输入一个宽度。

<

input {border：1px solid blue; display：inline;} div {border：1px solid red; display：inline;}

< form> <输入> <峰; br><峰; br> < div>< / div>< / form>

$ b

另外，Flex项目上的初始设置是 min-width：auto 。这意味着物品在主轴上的宽度不能缩小。

因此， input 元素不能缩小到低于它们的宽度你可以通过将输入设置为 min-width：0 来覆盖此行为（（））。 修改后的codepen ）

这里有一个完整的解释：为什么不弹性项目缩小过去的内容大小？

在某些情况下，您可能需要使用 width：100％或 width：0 来覆盖输入宽度。

When using input and button elements inside a flex container, the flex and/or flex-grow properties don't seem to do anything.

Code that demonstrates my issue.

button,
input {
  font-size: 1rem;
}

button {
  border: none;
  background-color: #333;
  color: #EEE;
}

input {
  border: 1px solid #AAA;
  padding-left: 0.5rem;
}

.inputrow {
  width: 30rem;
  display: flex;
  margin: 0 -.25rem;
}

.inputrow>* {
  margin: 0 .25rem;
  border-radius: 2px;
  height: 1.75rem;
  box-sizing: border-box;
}

.nickname {
  flex: 1;
}

.message {
  flex: 4;
}

.s-button {
  flex: 1;
}

<div class="inputrow">
  <input type="text" class="nickname" placeholder="Nickname">
  <input type="text" class="message" placeholder="Message">
  <button type="submit" class="s-button">Submit</button>
</div>

Code that shows what I'm expecting. (using DIVs instead of input and button).

.inputrow {
  width: 30rem;
  display: flex;
  flex-flow: row nowrap;
  margin: 0 -.25rem;
}

.inputrow>* {
  margin: 0 .25rem;
  height: 1.75rem;
}

.nickname {
  flex: 1;
  background-color: blue;
}

.message {
  flex: 4;
  background-color: red;
}

.s-button {
  flex: 1;
  background-color: green;
}

<div class="inputrow">
  <div class="nickname">Nickname</div>
  <div class="message">Message</div>
  <div class="s-button">Submit</div>
</div>

解决方案

An input element, unlike a div, comes with a default width.

Here's a simple illustration of this setting:

The browser automatically gives the input a width.

input {
  border: 1px solid blue;
  display: inline;
}

div {
  border: 1px solid red;
  display: inline;
}

<form>
  <input>
  <br><br>
  <div></div>
</form>

Also, an initial setting on flex items is min-width: auto. This means that items cannot shrink below their width on the main axis.

Hence, input elements cannot shrink below their width in a flex container.

You can override this behavior by setting your inputs to min-width: 0 (revised codepen)

Here's a full explanation: Why don't flex items shrink past content size?

In some cases, you may need to override input widths using width: 100% or width: 0.

这篇关于输入/按钮元素在柔性容器中不缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！