Flexbox CSS specificity bugs

[jdfreder]

I have a notebook (part of https://github.com/jdfreder/ipython-d3/) which uses the following code to center align contents within a box:

box.add_class('align-center')
box.add_class('center')

Unfortunately, this code doesn't seem to work always.

The specificity of the widget-container CSS is equal to the specificity of the flexbox alignment classes which leaves the browsers to make the decision of which class is more important. The widget-container inherits from the vbox class in LESS which defines default alignments. Since the LESS loses the inheritance structure when compiled, the default alignments are defined on the widget-container class (from the browsers point of view).

One possible, hackish, solution is to !important the alignment properties in the alignment classes. Maybe someone who is more familiar

[jdfreder]

Google has a lot of good info on specificity, but I still haven't found a solution.
https://www.google.com/search?q=css+specificity&oq=css+specific

[jdfreder]

Closed by Pull Request #5368