Geek Answers Handbook

Why does flex-basis not consider box size: border-box?

According to flex-basis MDN documentation's flex-basis property calculates the size of the flex element associated with the content field, unless another option is determined by the box-sizing CSS property. But I did not get the desired result neither in current Chrome, nor in IE11.

I wrote 2 examples:

 .horizontal-layout { display: flex; flex-direction: row; } header > span { flex: 1 1 100%; } header > .button { background-color: grey; } header > .app-name { background-color: orange; } header#with-border-padding > span { box-sizing: border-box; /* this is not useful at all */ } header#with-border-padding > .button { border: 1px solid black; padding-left: 5px; } 
 <header class="horizontal-layout"> <span class="button">A</span> <span class="app-name">B</span> <span class="button">C</span> </header> <header id="with-border-padding" class="horizontal-layout"> <span class="button">A</span> <span class="app-name">B</span> <span class="button">C</span> </header>

jsfiddle

  • The first example is a <header> with 3 <span> tags, each of which has flex: 1 1 100% ( flex-basis - 100%). Thus, each span receives the third part of the header .
  • The second example is equal to the first, but in this case the second span has some boundary and some complement. I thought flex-grow would flex-grow the same result as the first example, but that is not the case. Then I saw the flex-basis MDN documentation and realized that I had to install box-sizing: border-box; on flex elements to bind flex-basis to border-box . But this is also not so! Does anyone know why?

So thanks, if anyone can clarify the question of the second example. In my code, you can easily compare the sizes indicated by the <span> tags between both examples.

+5
source share
1 answer

flex-basis respects box-sizing: border-box .

This is flex-shrink , which results in a size difference.

If you remove flex-shrink effects, box-sizing: border-box works fine with flex-basis :

Instead of this:

 header > span { flex: 1 1 100%; }

Try the following:

 header > span { flex: 1 0 100%; }

Demo

Although border-box now works, now elements have their true width (100%). Of course, this can be fixed as follows:

 header > span { flex: 1 0 33.33%; }

Demo

Size calculations when flex-shrink are combined with border-box and / or padding are a bit complicated. Here is an explanation:

+4
source

More articles:


All Articles