Quindi ho un layout che utilizza pesantemente flexbox. Mi è piaciuto molto, ed è fantastico. Come nota, sto anche usando pesantemente AngularJS, ed è possibile che il mio uso di ng-include (o qualcos'altro) possa contribuire al problema.Flexbox Resize Event (?)
Il problema è che sto utilizzando un componente di terze parti per disegnare una griglia (angular-grid specifica). Ridimensiona le sue colonne solo quando specificamente chiamato da JavaScript e può anche essere configurato per farlo una volta dopo l'inizializzazione.
Il problema qui è che le colonne non vengono ridimensionate correttamente. Sono apparentemente ridimensionati in uno spazio diverso. Quello che sono abbastanza certo sta succedendo è che la flexbox disegna prima gli oggetti senza tenere conto della flessibilità, quindi dopo che le cose sono state caricate, il layout si allunga.
Supponendo che sia corretto nel mio presupposto, mi aspettavo che la soluzione sarebbe trovare un evento JavaScript (o JQuery o Angolare) da ascoltare quando è stato ridimensionato, quindi informare la griglia di cui ha bisogno per ridisegnare le colonne . Detto questo, non ho trovato un evento del genere, quindi forse mi sto avvicinando al problema, o forse non ho scelto i migliori termini di ricerca.
Solo per aiutare a visualizzare il problema, ecco un esempio HTML (la griglia è un po 'strana). (Lo style = "..." in realtà è definito attraverso classi CSS o tag materiale angolari - vedi here.)
<div style="display: flex; flex-direction: column;">
<h1>Example Fixed Width Tag</h1>
<div style="position: relative; flex: 1">
<div ag-grid="definition" style="width: 100%; height: 100%; position: absolute;">
<!-- This is where the grid is drawn. -->
<!-- The position: absolute is done because the grid requires the div here have -->
<!-- a height and width property. -->
</div>
</div>
</div>
Grazie per il vostro tempo.
Non riesco davvero a rispondere con una soluzione, ma ho voluto aggiungere un altro punto di accesso: ho incontrato problemi simili con EmberJS mentre provavo a ridimensionare una tela per adattarla all'elemento di avvolgimento. Quando gli elementi utilizzavano il flex, il ridimensionamento non si adattava alle dimensioni esatte, ma rimuovendo il flex l'avrebbe immediatamente fatto funzionare. – ferrouswheel
se si imposta min-larghezza: 1px; al div con ** flex: 1 ** funziona? – r3plica
Ho paura che non ci sia modo di sapere con certezza quando il browser termina il suo ridisegno, quindi le tue opzioni sono limitate a fare alcuni trucchi di visibilità (nascondere la griglia finché non conosci tutti i dati) o forzare il ridisegno usando $ tempo scaduto. – n1313