Problem mit flexibler img-Darstellung

[JQerleger]

Lass mal sehen, warum das bei dir nicht hinhaut.

LLAP 🖖

/* Grundlayout für SELFHTML-Beispiele */

html {
        background: transparent!important;
}

body {
	margin: 10px auto;
	max-width: 60em;
	font-family: sans-serif;
	color: #333333;
}

h1, main, main svg {
	border-radius: 0 8px 8px;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
}

h1 {
	background: #F1F3F4 url("//wiki.selfhtml.org/images/9/99/Selfhtml-beispiel-logo.png") 10px 5px no-repeat;
	border-color: #d5d5d5;
	padding-left: 200px;
}

main {
	display: block;     /* für IE */	
	background: #c4ced3;
	border-color: #8a9da8;
	min-height: 400px;
}

#hinweis {                    /* für Container */
	padding: 1em;    
	margin: 2em auto;
	width: 20em;
	height: 10em;
	background: #f1f3f4;
	border-left: 5px solid #c32e04;
}

.hinweis {                    /* für Textzeile */
        color: #c32e04; 
        font-style: italic; 
        border-bottom: 1px dotted; 
        display:inline-block; 
}
      body {
        display:-webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }
 
      /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
      header, nav, nav a, article, section, aside, footer {
        border-radius: 0px 0.5em 0.5em;
        border: 1px solid;
        padding: 10px;
        margin: 10px;
        -webkit-flex: 1 100%;
        flex: 1 100%;
      }
 
      header {
        background: #F1F3F4;
        border-color: #d5d5d5;
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
      }
      header * {
        -webkit-flex: 1 1 0;
        flex: 1 1 0;
      }
      header img {
        -webkit-flex: 0 0 150px;
        flex: 0 0 150px;
        margin-right: 20px;
      }
      header nav {
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      nav, nav ul, nav li{
        margin: 0;
        padding:0;
        border:none;
      }
      nav ul {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        display: flex;
        flex-direction: column;
      }
      nav li {
        list-style-type:none;
        margin: 1.3em 0;
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      nav a {
        display:inline-block;
        width:95%;
        background: #fffbf0;
        border: 1px solid #dfac20;
        margin: 0;
        text-decoration: none;
        text-align: center;
      }
      nav a:hover {
        background-color: #dfac20;
      }
      section {
        background: #F1F3F4;
        border-color: slateblue;
      }
      article {
        background: #ffede0;
        border-color: #df6c20;
      }
      article img {
      max-width: 100%;
      }
      aside {
        background: #ebf5d7;
        border-color: #8db243;
      }
      footer {
        background: #e4ebf2;
        border-color: #8a9da8;
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
      }
      footer * {
        -webkit-flex: 1 1 0;
        -webkit-justify-content: space-between;
        flex: 1 1 0;
        justify-content: space-between;
      }
      footer p {
        text-align:right;
      }
      /* Smart Phones und Tablets mit mittlerer Auflösung */
      @media all and (min-width: 35em) {
      header img {
        margin-right: 50px;
      }
      nav ul {
        -webkit-flex-direction: row;
        flex-direction: row;
      }
      nav li {
        margin: 0 10px;
        -webkit-flex: 1 1 0;
        flex: 1 1 0;
      }
      article {
        webkit-order: 2;
        order: 2;
      }
      #news {
        -webkit-flex: 1 auto;
        -webkit-order: 3;
        flex: 1 auto;
        order: 3;
      }
      aside {
      /* durch auto werden die beiden asides in eine Zeile gesetzt */
        -webkit-flex: 1 auto;
        -webikit-order: 4;
        flex: 1 auto;
        order: 4;
      }
      footer {
        webkit-order: 5;
        order: 5;
      }
      }
 
     /* Large screens */
     @media all and (min-width: 50em) {
     article {
        /* Der Article wird 2.5x so breit wie die beiden asides! */
        -webkit-flex: 5 1 0;
        -webkit-order: 3;
        order: 3;
        flex: 5 1 0;
      }
      aside {
        flex: 2 1 0;
      }
      #news {
        -webkit-flex: 2 1 0;
        -webkit-order: 2;
        -webkit-align-self: center;
        flex: 2 1 0;
        order: 2;
        align-self: center;
        height: 120px;
      }
      }

Das ist, bis auf die Zugabe

article img {
max-width: 100%;
}
die original CSS

JQerlger