[MD settings] .settings-row.wide and reduce use of flex layout

chrome/browser/resources/settings/settings_shared_css.html

Index: chrome/browser/resources/settings/settings_shared_css.html
diff --git a/chrome/browser/resources/settings/settings_shared_css.html b/chrome/browser/resources/settings/settings_shared_css.html
index dfcba57e1a90770fefe14754f2bdaf2cb75c3d4f..58ef69f18be215737eb049cd2e42ea27e4408c07 100644
--- a/chrome/browser/resources/settings/settings_shared_css.html
+++ b/chrome/browser/resources/settings/settings_shared_css.html
@@ -315,11 +315,20 @@
         flex: auto;
       }
 
+      /* For grouping elements with common flex options. */
       .settings-row {
         align-items: center;
         display: flex;
         flex-direction: row;
         max-width: 100%;
+        /* Workaround for text elision in sub-elements. See:
+         * https://www.google.com/search?q=flexbox+truncated+text&oq=flexbox+truncated+text */

[hcarmona, 2017/05/06 01:26:32]

Can we point to a more concrete source rather than a google search?

[dschuyler, 2017/05/06 01:32:43]

I'd prefer to remove the reference.
I didn't want to include a link to any particular third party reference to the
subject. wdyt?

[dschuyler, 2017/05/06 01:39:40]

Done.

+        min-width: 0;
+      }
+
+      /* Expand to fill-up available space. */
+      .settings-row.wide {
+        flex: 1;
       }
 
       .no-outline,