Width ignored on flexbox items

CssWidthFlexbox

Css Problem Overview

http://jsfiddle.net/XW9Se/

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..

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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.

Solution 3 - Css

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

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

Solution 4 - Css

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

Solution 5 - Css

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

Solution 6 - Css

Also (if nothing from above works)

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

Solution 7 - Css

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.

Solution 8 - Css

Add display:inline-block; in left class

Categories
Recommended Css Solutions
Recommended Width Solutions
Recommended Flexbox Solutions

Previous Solution:

How to jump from Intellij terminal to editor with shortcut

Intellij IdeaKeyboard Shortcuts

Next Solution:

Java, how to remove an Integer item in an ArrayList

Java

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlexView Question on Stackoverflow
Solution 1 - CssvalsView Answer on Stackoverflow
Solution 2 - CssBassMHLView Answer on Stackoverflow
Solution 3 - CssAdriftView Answer on Stackoverflow
Solution 4 - CssgpgekkoView Answer on Stackoverflow
Solution 5 - CssAmir Hassan AzimiView Answer on Stackoverflow
Solution 6 - CssVasilis SiourdasView Answer on Stackoverflow
Solution 7 - CssAlexander D'AttoreView Answer on Stackoverflow
Solution 8 - CssrjdmelloView Answer on Stackoverflow