title: How to make an input react the same way as the parent div in a flexbox?
body: <p>I'm trying to size some divs correctly with a flexbox, so that the inputs and the other items that I'm going to add in later have the correct sizes, but no matter what I do to the div, the input size doesn't change.</p>
  
  <p>What can I do to the input to make it so that it's size also changes according to the parent div?</p>
  
  <p>Below I posted the code I have currently, along with the same code with an obviously small input. The second one shows the green area with the correct sizes with the small inputs, while on the one on top, the inputs stretch the parent out and all have the same size...</p>
  
  <p>I need to keep the sizes marked in green by the second one, and I want the inputs to match that size...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-o-1 {flex: 1 1 auto;}
  .flex-o-2 {flex: 2 2 auto;}
  .flex-o-3 {flex: 3 3 auto;}
  .flex-o-4 {flex: 4 4 auto;}
  .flex-o-5 {flex: 5 5 auto;}
  
  .GenInfo {display: flex;}
  
  .GenInfo&gt;div {
    margin-left: 0.2em;
    margin-right: 0.2em;
    background-color: green;
    height: 2em;
  }
  
  .GenInfo&gt;div&gt;input {max-width: 100%;} /* Also tried without this, nothing changes */
  
  .SmallInput {max-width: 1em !important;} /* !important just for testing */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="GenInfo"&gt;
  
    &lt;div class="flex-o-5"&gt;
      &lt;input type="text" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-1"&gt;
      &lt;input type="text" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-3"&gt;
      &lt;input type="text" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-2"&gt;
      &lt;input type="text" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-2"&gt;
      &lt;input type="text" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-4"&gt;
      &lt;input type="text" /&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="GenInfo"&gt;
  
    &lt;div class="flex-o-5"&gt;
      &lt;input type="text" class="SmallInput" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-1"&gt;
      &lt;input type="text" class="SmallInput" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-3"&gt;
      &lt;input type="text" class="SmallInput" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-2"&gt;
      &lt;input type="text" class="SmallInput" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-2"&gt;
      &lt;input type="text" class="SmallInput" /&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-o-4"&gt;
      &lt;input type="text" class="SmallInput" /&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>