Add max-width to flexbox and move from Python to CSS logic (#57)

src/lib/flexbox.css

@@ -0,0 +1,12 @@
+div.webviz-core-components-flexbox {
+    display: flex; 
+    flex-wrap: wrap;
+    max-width: 90vw;
+}
+
+/* Select direct children of a flexbox instance,
+   and set e.g. default min-width on them */
+div.webviz-core-components-flexbox > * {
+    flex: auto;
+    min-width: 300px;
+} 

src/lib/index.js

@@ -2,4 +2,6 @@
 import WebvizPluginPlaceholder from "./components/WebvizPluginPlaceholder.react";
 import ColorScales from "./components/ColorScales.react";
 
+import "./flexbox.css"
+
 export { WebvizPluginPlaceholder, ColorScales };

webviz_core_components/flexbox.py

@@ -7,39 +7,17 @@
 
 class FlexBox(html.Div):
     """Behaves like Div from dash_html_components, but extends that container with
-    flexbox style settings. It also adds necessary flex CSS settings to its children.
-
-    Other style settings are untouched.
+    flexbox style settings. It also adds min-width CSS style to direct children.
     """
 
     def __init__(self, *args, **kwargs):
-        def container_style(old_style):
-            style = {} if old_style is None else copy.deepcopy(old_style)
-            style.update({"display": "flex", "flexWrap": "wrap"})
-            return style
-
-        def update_children_style(children):
-            if children is not None:
-                for child in children:
-                    style = (
-                        copy.deepcopy(child.style) if hasattr(child, "style") else {}
-                    )
-
-                    style["flex"] = style.get("flex", "auto")
-
-                    if "min-width" not in style and "minWidth" not in style:
-                        style["minWidth"] = "250px"
-
-                    child.style = style
-
-            return children
-
-        args, kwargs = argument_modifier(
-            html.Div, "style", container_style, args, kwargs
-        )
+        def add_flexbox_css_class(className):
+            return (
+                "" if className is None else className + " "
+            ) + "webviz-core-components-flexbox"
 
         args, kwargs = argument_modifier(
-            html.Div, "children", update_children_style, args, kwargs
+            html.Div, "className", add_flexbox_css_class, args, kwargs
         )
 
         super().__init__(*args, **kwargs)