Technical Flaw in flex-basis and calc


#1

flex-basis: calc(100%-430px);

the way browsers are interprating it I think it’s wrong. where am I commiting technical mistakes.

image


#2

The plus and minus mathematical operators (the minus sign, in this case) must be surrounded by white space.


#3

Thank you sir. i will remember this now.


#4

Though check IE11 (maybe Edge too). It doesn’t like flex-basis and calc(). Might have an issue there.


#5

It works.


#6

IE11 is ok as long as you don’t use calc in the shorthand version :slight_smile:

flex-grow:1;/* keep separate for ie11 bug */
flex-basis:calc(70% - 1rem);/* keep separate for ie11 bug */

#7

…which is what I do. Good to know :slight_smile: thanks.


#8

I guess this is related to this post I realy wonder if you need flex-basis in the first place


#9

You do for that demo :slight_smile:


#10

@PaulOB. Does he realy need that Paul?. I mean for the layout from the other post or am I missing someting?


#11

This was an Independent question not related to any post.


#12

Ha ok fair enough. Did you fix the other layout. It seem to me that you had a number of unnecessary nested divs


#13

That would be a question for the other thread :slight_smile:

The original idea was to be able to switch column sides, or not output both columns, or nest columns with the simplest amount of css.

In the original demo all changes were achieved with a class change and minimal css.

But we are getting off-topic now :slight_smile:


#14

glancing over this post, so forgive me if someone else has mentioned this before. it’s IMPORTANT to pay attention to white space when using calc();

flex-basis: calc(100%-430px); should be flex-basis: calc(100% - 430px);


#15

Yes that was the first question answered:).

The thread has veered off topic a bit:)


#16

Historical background of the other post in which you are keenly interested is here →

Please read the whole discussion patiently.

I hope that will help. Thanks.


#17

No I was referring to this post: Reorganizing Layout Code | Minimizing the CSS if possible