Flex-basis not expanding width

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.

With `flex-direction: row`, all flexibility properties (e.g., `flex`, `flex-basis`, etc) affect width. With `flex-direction: column`, they control height. — Michael Benjamin, Oct 12 '17 at 18:17
the part that I'm not understanding is that my flex-direction is row, and still does not affect width. Sorry, but I'm still confused :( — Alan Souza, Oct 12 '17 at 18:19
`flex-basis` applies only to flex items. The flex container is `column`, that's why they control height. On the children of your row-direction container, they will control width. — Michael Benjamin, Oct 12 '17 at 18:20
@AlanSouza The main confusion I suspect here is that you think that you, when combined `display: flex; flex-direction: row; flex: 200px` for the `Item` rule, they should be 200px wide? ... and if yes, that's where you misunderstood it. The `flex: 200px` is set on the item but acts on what the `display: flex` is set on its parent (which has `flex-direction: column`), it this case the `Container`, and the `display: flex; flex-direction: row` you have on `Item` will affect children of the `Item`. ... Does this make sense? — Asons, Oct 13 '17 at 17:47

score 2 · Accepted Answer · answered Oct 12 '17 at 18:16

2

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.

answered Oct 12 '17 at 18:16

Nenad Vracar

118,580
15
151
176

Thanks. So I need to make sure that none of my parents have `flex-direction: column` to be able to use `flex-basis` in a `flex-direction: row`? – Alan Souza Oct 12 '17 at 18:20
No, just first parent element which is flex-container if you used `display: flex` – Nenad Vracar Oct 12 '17 at 18:21
If you have `row` direction on flex-container, `flex` property will modify width of flex-children but if you used column on parent then `flex` property will modify height of flex items, and what flex-direction you have set on flex items is not important in this context. – Nenad Vracar Oct 12 '17 at 18:25
Yeah. I must be missing something, I'm really sorry that I dont get this. But take a look on this example: https://codesandbox.io/s/9jpk3qq2qp – Alan Souza Oct 12 '17 at 18:26
Here is updated demo https://codesandbox.io/s/2496vz533p – Nenad Vracar Oct 12 '17 at 18:26
I tried to put an "Inner element" and still does not apply width. Is there a way that I can affect the width without using `min-width`, meaning only flex-basis? – Alan Souza Oct 12 '17 at 18:27
I'm just confused when I would use `flex-basis` for direction row, in a structure where I may have a parent that has `flex-basis` column. – Alan Souza Oct 12 '17 at 18:35
In that case you will have to use those styles on `innerItem` https://codesandbox.io/s/7mm4n21pxq – Nenad Vracar Oct 12 '17 at 18:37
Thanks can you add another answer with this codesandbox? I want to make sure I accept this last solution as it is what I'm looking for. It would be great if you can explain also why I need `flex-shink`... – Alan Souza Oct 12 '17 at 18:40
`flex-shrink: 0` is to prevent shrinking in width – Nenad Vracar Oct 12 '17 at 18:42
I get that. But why the browser is shrinking the content when I specify that I want 200px width? – Alan Souza Oct 12 '17 at 18:43
1

@AlanSouza, refer to the duplicate. Most of your questions are answered there. See ***The `flex-shrink` factor*** section for an explanation to your last question. – Michael Benjamin Oct 12 '17 at 19:08

Flex-basis not expanding width

1 Answers1