width of flex ratio examples (mdn#187)

* width of flex-grow example

confusing lesson when the flex container is wider than the viewport. this fixes that.

* min-width: 500px; (mdn#188)

min-width: 500px;

* Update flex-basis.html (mdn#189)

* Update flex-shrink.html (mdn#190)

* Update flex-shrink-ratios.html (mdn#191)

* Update flex-shrink-min-content.html (mdn#192)

Author: estelle

flexbox/ratios/flex-basis.html

@@ -41,13 +41,15 @@
         text-align: right;
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         padding: 5px 10px 5px 26px;
         font-size: 100%;
       }
 
       section {
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         border: 1px solid #4d4e53;
         border-radius: 2px;
         padding: 10px 14px 10px 10px;

flexbox/ratios/flex-grow.html

@@ -41,13 +41,15 @@
         text-align: right;
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         padding: 5px 10px 5px 26px;
         font-size: 100%;
       }
 
       section {
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         border: 1px solid #4d4e53;
         border-radius: 2px;
         padding: 10px 14px 10px 10px;

flexbox/ratios/flex-shrink-min-content.html

@@ -41,13 +41,15 @@
         text-align: right;
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         padding: 5px 10px 5px 26px;
         font-size: 100%;
       }
 
       section {
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         border: 1px solid #4d4e53;
         border-radius: 2px;
         padding: 10px 14px 10px 10px;

flexbox/ratios/flex-shrink-ratios.html

@@ -41,13 +41,15 @@
         text-align: right;
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         padding: 5px 10px 5px 26px;
         font-size: 100%;
       }
 
       section {
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         border: 1px solid #4d4e53;
         border-radius: 2px;
         padding: 10px 14px 10px 10px;

flexbox/ratios/flex-shrink.html

@@ -41,13 +41,15 @@
         text-align: right;
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         padding: 5px 10px 5px 26px;
         font-size: 100%;
       }
 
       section {
         width: 90%;
         max-width: 700px;
+        min-width: 500px;
         border: 1px solid #4d4e53;
         border-radius: 2px;
         padding: 10px 14px 10px 10px;