CSS Flexbox issue: Why is the width of my flexchildren affected by their contents?

Question

The 2 children of my flexbox are each given a style of box-flex: 1. My understanding is that their widths should then be equal to each other (both occupying 50% of the total width of their parent flexbox). But when content is added to the children, their width changes (depending on what the content is and padding)! Why does this happen?

CSS:

.hasFlex {
   display: box;
   display: -webkit-box;
   display: -moz-box;
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;}
.box0 {
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;}
.box1 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;}
.box2 {
   -webkit-box-flex: 2;
   -moz-box-flex: 2;
   box-flex: 2;}
.box3 {
   -webkit-box-flex: 3;
   -moz-box-flex: 3;
   box-flex: 3;}
.container {
margin-bottom: 10px;
}

HTML:

<div class="container hasFlex">
<div id="main" role="main" class="box1">
    <div class="innerBG">
      a bunch of stuff (divs, text, etc) go here
    </div>
</div>
<div id="sidebar" class="box1">
    <div class="innerBG">
       a bunch more stuff (divs, text, etc.) go here
    </div>
</div>
</div>

http://stackoverflow.com/q/36247140/3597276 – Michael Benjamin Aug 08 '16 at 12:03 — Michael Benjamin, Aug 08 '16 at 12:03

thirtydot · Accepted Answer · 2018-05-23T14:22:54.633

96

The workaround for this is to add width: 0 to the .box1 elements.

See: http://jsfiddle.net/thirtydot/fPfvN/

I think I found that out for myself here: http://oli.jp/2011/css3-flexbox/

The preferred width of a box element child containing text content is currently the text without line breaks, leading to very unintuitive width and flex calculations → declare a width on a box element child with more than a few words (ever wonder why flexbox demos are all “1,2,3”?)

Note that for your situation, it looks far easier to use display: table + table-layout: fixed: http://jsfiddle.net/thirtydot/fPfvN/1/. Though, flexbox does allow you to quickly change things around in a way that display: table can't compete with.

edited May 23 '18 at 14:22

answered Nov 02 '11 at 19:07

thirtydot

224,678
48
389
349

1

Any width will do. May as well make it `50%` in the situation for the sake of degradability. – Barney Nov 20 '12 at 15:42
1

Percentage widths do not force the workaround in the same way as absolute widths. (in Webkit, chrome v27) – JSDBroughton Apr 09 '13 at 14:43
6

I just wanted to say that by using `width: 0` in the children, `justify-content: spaced-between;` in the parent, and the combo of `-webkit-flex-direction: row;` with `-webkit-flex-wrap: wrap;` also in the parent, I got really nice, well-behaved boxes that are evenly spaced and break to the next line for long text. I went through a lot of SO answers to get my ideal behavior, and `width:0` helped me solve the final piece! – Amru E. Jan 21 '14 at 06:35
wish I came across this answer an hour ago – Twifty Mar 08 '15 at 17:36
3

If you're using 'flex-direction: column', this seems to break. 'flex-basis: 0' is a better solution, though THAT breaks when used in conjunction with 'flex-grow: 0' (which works if you don't use the flex-basis property). Overall flexbox seems far less elegant than promised :( – Drew Beck Jul 04 '15 at 07:37
This is brutal. Thanks for the help. – coolboyjules Jun 08 '17 at 22:15
Doing this causes a problem with wrapping when in a narrow viewport. – Kalnode Nov 27 '17 at 16:30

CSS Flexbox issue: Why is the width of my flexchildren affected by their contents?

1 Answers1

Linked