输入/按钮元素不会在Flex容器中缩小

Question

输入/按钮元素不会在Flex容器中缩小

在Flex容器中使用输入和按钮元素时，flex和/或flex-grow属性似乎没有做任何事情。

代码，演示我的问题。

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>

显示我期待的代码。（使用DIV代替input和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>

Answer 1

一种input元素，不像div，带有默认的宽度。浏览器自动给出input宽度。input&nbsp;{ &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;display:&nbsp;inline;}div&nbsp;{ &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red; &nbsp;&nbsp;display:&nbsp;inline;}<form> &nbsp;&nbsp;<input> &nbsp;&nbsp;<br><br> &nbsp;&nbsp;<div></div></form>此外，flex项目的初始设置是min-width: auto。这意味着物品不能在主轴上收缩到其宽度以下。因此，input元素不能收缩到其默认宽度以下，并且可能被迫溢出Flex容器。您可以通过将输入设置为min-width: 0（修改后的codepen）来覆盖此行为在某些情况下，您可能需要使用width: 100%或覆盖输入宽度width: 0。

Answer 2

我想扩展Michael_B解决方案在某些情况下，您可能需要使用width：100％或width：0来覆盖输入宽度。你也可以&nbsp;calc(100%)

Answer 3

width: 100% || 0在这里为我工作，但最小宽度：0不。我想这[min || max]-width和width它本身在元素大小上有一个主要特征。Flex之后，并根据其值，增加其特性以提供灵活性等。奇怪的是，flex-basis在这种情况下宽度没有任何普遍性，而在其他一些情况下，它有。[CSS是敬畏]一些......哈哈&nbsp;