Article passt größe nicht an text an

[Manuel]

Guten Tag Experten, ich habe bei bestimmten Browsern (va auf mobilen Endgeräten (außer Firefox und Safari) ein Problem mit einem CSS File für ein Gästebuch auf einem lokalen Webserver.

Ich habe Text in einem Article und der Article soll sich an die Länge des Textes anpassen. Am unteren Ende des Bildschirms steht immer der Footer, außer wenn der Text Länger als die Höhe des Bildschirms-Footer-Nav-Header ist. Das Funktioniert auch alles ganz gut nur eben nicht in allen Browsern.

Im Anhang findet ihr die betreffende CSS-Datei und ein Bild, das das Problem darstellt.

*{
	text-transform:lowercase;
}
	
html{
	width:100%;
	height:100%;
	margin:0;
}
	
	body{	
        display: flex; 			
        flex-flow: row wrap;
		flex-direction: column;
		
		display: -webkit-box; 			
		display: -ms-flexbox; 			
		display: flex; 			
		-webkit-box-orient: horizontal; 			
		-webkit-box-direction: normal; 			
		-ms-flex-flow: row wrap; 			
		flex-flow: row wrap;
		-ms-flex-direction: column;
		flex-direction: column;
		
		
		margin: 0 auto;
		max-width: 60em;
		min-height: 100%;
        background: green;
		font-family: Century Gothic, Calibri, sans serif;  
    }
	  
		main{
			display: flex; 
			flex: 1 1 100%;
			
			display: -webkit-box; 
			display: -ms-flexbox; 
			display: flex; 
			-webkit-box-flex: 1 1 100%; 
			-ms-flex: 1 1 100%; 
			flex: 1 1 100%;
			
			position:relative;
		}
		
			header{
				padding:10px;				
			}
			
			header nav {
				flex: 1 1 100%;
				
				-webkit-box-flex: 1 1 100%;
				-ms-flex: 1 1 100%;
				flex: 1 1 100%;
			}
	  
			article{
				flex: 1 1 100%;

				-webkit-box-flex: 1 1 100%;
				-ms-flex: 1 1 100%;
				flex: 1 1 100%;				
				
				padding:10px;
				background: #F3F3F3;
			}
						
			nav{
				display: flex; 		
				flex-direction: row;
				
				display: -webkit-box; 		
				display: -ms-flexbox; 		
				display: flex; 		
				-webkit-box-orient: horizontal; 		
				-webkit-box-direction: normal; 		
				-ms-flex-direction: row; 		
				flex-direction: row;
				
				background: #808080;		
				margin-bottom: 1px;
				padding:0;
				border:none;
				position:sticky;

				position:-webkit-sticky;
				position:sticky; 	
			
				top: 0;
			}
			
				nav ul {
					display: flex; 
					flex-flow: row;
					flex: 1 0 100%;
					
					display: -webkit-box; 
					display: -ms-flexbox; 
					display: flex; 
					-webkit-box-orient: horizontal; 
					-webkit-box-direction: normal; 
					-ms-flex-flow: row; 
					flex-flow: row;
					-webkit-box-flex: 1 0 100%;
					-ms-flex: 1 0 100%;
					flex: 1 0 100%;
					
					margin: 0;
					padding:0;
					border:none;
				}
				
					nav li {
						flex: 1 1 20%;
						
						-webkit-box-flex: 1 1 20%;
						-ms-flex: 1 1 20%;
						flex: 1 1 20%;
						
						list-style-type:none;
						color: #080808;
						margin: 0;
						padding:0;
						border:none;
						//width: 20%;
						
					}

						nav a {
							display:inline-block;
							text-align: center;
							padding-top: 15px;
							padding-bottom: 15px;
							text-decoration: none;
							color:#0c0c0c;	
							min-width:100%;
							
						}
						nav a:hover {
							background-color: #f8f8f8;
						}
			
			footer{
				display: flex; 
				
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
					
				padding:10px;
				margin-top: 10px;
				height: 50px;
				background: #808080;
				
				position:sticky;

				position:-webkit-sticky;
				position:sticky; 				
				
			}
			
				header h1{
					color:#909090;
				}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		

Im den Bilder ist zur besseren Ersichtlichkeit der body grün, article weiss und der footer grau.

Da ich noch ein blutiger Anfänger im Webdesign bin hoffe ich doch sehr auf die Hilfe der Profis.

Grüße

Manuel