title: Flex-basis not expanding width
body: <p>I have a container that has items displayed in a column-mode. I would like these items to have a "min-width" so that they would align.</p>
  
  <p>I was trying to achieve this result using flexbox properties only. I'm probably missing something, but do you have any idea why the <code>flex-basis</code> is always affecting the height?</p>
  
  <p><a href="https://codesandbox.io/s/vjm6zo5l23" rel="nofollow noreferrer">https://codesandbox.io/s/vjm6zo5l23</a></p>
  
  <pre><code>const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  `;
  
  const Item = styled.div`
    display: flex;
    flex-direction: row;
    border: 1px solid;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 3px;
    flex: 200px;
  `;
  
  const App = () =&gt;
    &lt;Container&gt;
      &lt;Item&gt;test&lt;/Item&gt;
      &lt;Item&gt;test&lt;/Item&gt;
      &lt;Item&gt;test&lt;/Item&gt;
      &lt;Item&gt;test&lt;/Item&gt;
      &lt;Item&gt;test&lt;/Item&gt;
    &lt;/Container&gt;;
  </code></pre>
  
  <p>In this example I was expecting Item to have 200px width since my flex direction is row. But regardless of the flex-direction, <code>flex-basis</code> is always affecting the height.</p>