Make image max-width visible

Author: wbamberg

flexbox/use-cases/media-flipped.html

@@ -27,7 +27,7 @@
       }
 
       textarea:nth-of-type(1) {
-        height: 250px;
+        height: 310px;
       }
 
       textarea:nth-of-type(2) {
@@ -56,10 +56,6 @@
         margin: 5px;
       }
 
-      img {
-        max-width: 100%;
-      }
-
       .media {
         width: 500px;
         border: 2px dotted rgb(96, 139, 168);
@@ -74,6 +70,9 @@
       }
     </style>
     <style class="editable">
+      img {
+        max-width: 100%;
+      }
       .media {
         display: flex;
         align-items: flex-start;
@@ -99,6 +98,10 @@
       </div>
     </section>
     <textarea class="playable-css">
+img {
+  max-width: 100%;
+}
+
 .media {
   display: flex;
   align-items: flex-start;

flexbox/use-cases/media.html

@@ -27,7 +27,7 @@
       }
 
       textarea:nth-of-type(1) {
-        height: 180px;
+        height: 240px;
       }
 
       textarea:nth-of-type(2) {
@@ -56,10 +56,6 @@
         margin: 5px;
       }
 
-      img {
-        max-width: 100%;
-      }
-
       .media {
         width: 500px;
         border: 2px dotted rgb(96, 139, 168);
@@ -70,6 +66,9 @@
       }
     </style>
     <style class="editable">
+      img {
+        max-width: 100%;
+      }
       .media {
         display: flex;
         align-items: flex-start;
@@ -92,6 +91,10 @@
       </div>
     </section>
     <textarea class="playable-css">
+img {
+  max-width: 100%;
+}
+
 .media {
   display: flex;
   align-items: flex-start;