Flex增长不扩展div的内容以适合div的整个宽度

Question

我试图让输入元素占据整个分配的宽度，但是由于某种原因，它只是保留了最初呈现时使用的默认大小。

CodeSandbox

我可以通过这样做来弥补这一点，

. . .
<input style={{ width: '100%' }}
. . .

但是我给人的印象是弹性增长可以为我做到这一点。

我也尝试过用flexBasis: '100%'代替flexGrow: 1，但这似乎产生了与后者相同的结果。

不确定我在这里做错了什么，是否明确地在输入上设置宽度是更改宽度的唯一方法？

预期输出：

Answer 1

要使input元素在flex容器中占用尽可能多的空间，可以使用以下选项之一：

1. 在输入元素上设置宽度。设置flex-basis或flex-grow时，是在输入元素的容器上进行设置，而不是input本身。因此，容器的大小会增加，而不是输入的大小。

const Input = ({ label }) => (
  <div className="inputContainer">
    <div>{label}</div>
    <input />
  </div>
);

function App() {
  return (
    <div className="container">
      <Input label="First Input" />
      <Input label="Second Input" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

.container { display: flex; }
.inputContainer { flex-grow: 1; }

.inputContainer input {
  width: 100%;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1. 获得所需布局的另一种方法是，可以将输入容器设置为flex容器，然后在{{1}周围包裹的div元素上设置flex-grow或flex-basis }}和label元素。

   input

   const Input = ({ label }) => (
     <div className="inputContainer">
       <div>
         <label>{label}</label>
         <input />
       </div>
     </div>
   );
   
   function App() {
     return (
       <div className="container">
         <Input label="First Input" />
         <Input label="Second Input" />
       </div>
     );
   }
   
   ReactDOM.render(<App />, document.getElementById("root"));

   .container,
   .inputContainer, 
   .inputContainer div {
     display: flex;
   }
   
   .inputContainer {
     flex-grow: 1;
   }
   
   .inputContainer div {
     flex-direction: column;
     flex-grow: 1;
   }