Width ignored on flexbox items

Question

I've set width: 200px; on the left <div> but if I view it with the browser inspector tool it appears that the real width is random or something. It keeps changing depending on the window size.

Why doesn't the width take effect?

EDIT: If I remove width: 100% the width stays fixed. But I need that so the #main div takes the remaining width :( Is there any way to have the sidebar @ fixed width and the other <div> fill the rest of the container width? width: auto; on #main doesn't work..

Isn't the whole idea of a flexbox that it changes on window resizing? — gpgekko, Jan 28 '14 at 13:12
use this style: `#main{ flex: 1; }` to take the remaining width according to the other element's fixed width. — Asef Hossini, Sep 22 '21 at 13:47

score 257 · Answer 1 · answered Jan 28 '14 at 18:28

257

The answer from Adrift is perfect; but a change to make it more flex would be

#left{
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
}

And remove the width property entirely.

It would be the flex way to say that the element will have an invariable width of 200px

answered Jan 28 '14 at 18:28

vals

61,425
11
89
138

49

shorthand: `flex: 0 0 200px;` – Dan Aug 15 '16 at 13:08
38

Simply add `flex-shrink: 0` property and css width will be respected. – Ashish Rawat Jan 22 '18 at 10:04
This combined with `order: 2` (to switch it to the right) worked flawlessly to do a side panel. Thanks! – rmolinamir Dec 19 '18 at 21:08
1

Just wanted to add in that I only needed `flex-shrink: 0` to fix my personal issue (where `flex: auto` alone didn't fix it) – DragonJawad Mar 01 '19 at 14:18
Then why when I change the direction of the flex container, the flex-grow: 0; not working? The shape is out of shape. Can you tell me why :/ ? – hayley Jun 01 '21 at 09:54
2

Just a note for anyone copy pasting, these grow and shrink have to be applied to the FLEX CHILD and not the container. – vigilante_stark Oct 25 '21 at 15:48
Perfect, thank you. For my case, it worked without providing flex-basis. Just to keep in mind in case someone is still having problems. – Gogol Feb 03 '22 at 11:41
@hayley If the flex direction is column, you set a fixed width and this answer affects height. – ThaJay Jan 26 '23 at 09:13

score 94 · Answer 2 · edited Apr 07 '20 at 01:31

94

My preferred way of dealing with this situation is to add:

flex-shrink: 0;

This way you may continue using width in your Flex container and you've given it specific information about how you wish this flex item to behave.

Another option, depending on the requirement is to use min-width, which is respected when using flex.

edited Apr 07 '20 at 01:31

Kevin Workman

41,537
9
68
107

answered Jan 28 '20 at 07:42

BassMHL

8,523
9
50
67

score 17 · Answer 3 · answered Jan 28 '14 at 13:17

17

Give the #left div a min-width of 200px, should do the job.

answered Jan 28 '14 at 13:17

gpgekko

3,506
3
32
35

1

pretty much the simplest answer. – Peege151 Aug 16 '22 at 20:52

score 17 · Accepted Answer · answered Jan 28 '14 at 13:25

17

Remove the width on .container > div and use flex: auto; on #main: fiddle

#main {
   flex: auto; 
   background: lightblue; 
  -webkit-order: 2;
   order: 2;     
}

answered Jan 28 '14 at 13:25

Adrift

58,167
12
92
90

score 3 · Answer 5 · answered Dec 19 '18 at 11:22

3

add display: contents on the element or div you want to maintain the width.

answered Dec 19 '18 at 11:22

Amir Hassan Azimi

9,180
5
32
43

score 2 · Answer 6 · answered May 21 '19 at 10:24

2

Also (if nothing from above works)

Check your min-width and max-width. It fixed the same problem for me by increasing their range.

answered May 21 '19 at 10:24

Vasilis Siourdas

309
1
11

score 0 · Answer 7 · answered Nov 18 '20 at 06:15

0

Solved this with a flex not respecting min-width when there was not enough content to fill that width.

Added the CSS rule box-sizing: initial; on the same flex element that had the non-working min-width declaration.

answered Nov 18 '20 at 06:15

Llama D'Attore

323
1
12

score -3 · Answer 8 · edited Mar 01 '20 at 12:04

-3

Add display:inline-block; in left class

edited Mar 01 '20 at 12:04

The Codesee

3,714
5
38
78

answered Jan 28 '14 at 13:16

rjdmello

865
2
9
14

1

The OP is using flex though :) – gavin stanley Jul 28 '20 at 13:51

Width ignored on flexbox items

8 Answers8

Linked