Flex-basis not expanding width [duplicate]

Question

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.

I was trying to achieve this result using flexbox properties only. I'm probably missing something, but do you have any idea why the flex-basis is always affecting the height?

https://codesandbox.io/s/vjm6zo5l23

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 = () =>
  <Container>
    <Item>test</Item>
    <Item>test</Item>
    <Item>test</Item>
    <Item>test</Item>
    <Item>test</Item>
  </Container>;

In this example I was expecting Item to have 200px width since my flex direction is row. But regardless of the flex-direction, flex-basis is always affecting the height.

Answer 1

flex-basis will affect height of element if you have used flex-direction: column on parent element or flex-container. In your case you can use min-width: 200px on flex items.