Non so se tu abbia già risolto, ad ogni modo riporto qui una possibile soluzione.
Considerando ciò che stavi cercando di fare, per quel che ne so, in linea di massima mi pare non si possa facilmente stabilire una dimensione per quel contenuto <img> (o per qualsiasi altro elemento) in base allo spazio occupato da un altro elemento. A meno che non si usi un po' di JavaScript per calcolare lo spazio restante e quindi applicare opportunamente la dimensione all'elemento img.
Quello che invece ti consiglio di fare è impostare l'immagine come background dell'elemento .logo e applicargli il valore contain per la proprietà background-size. Questo mostrerà l'immagine in modo che sia sempre contenuta nello spazio disponibile. Mentre per il div.content basterà usare flex-shrink:0.
Qui un esempio della soluzione partendo dal tuo esempio:codice:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <style type="text/css"> body { margin: 0; } section { display: flex; flex-flow: column; height: 100vh; overflow:hidden } .logo { width: 100%; height: 500px; background: blue url('http://via.placeholder.com/500x500') center/contain no-repeat; } .content { flex-grow: 1; background: lightgreen; } </style> </head> <body> <section> <div class="logo"></div> <div class="content"> questo contenuto deve essere sempre visibile, in caso non ci fosse spazio ad essere ridimensionato DEVE essere il div.logo <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> </div> </section> </body> </html>
PS: occhio che gli elementi <section> dovrebbero sempre essere corredati da un relativo elemento di intestazione (<hN>), altrimenti il validatore segnala questa mancanza con un'avvertenza.
Rispondi quotando