Итак, у меня есть макет, который сильно использует flexbox. Мне это очень понравилось, и это здорово. В качестве примечания я также сильно использую AngularJS, и возможно, что мое использование ng-include (или что-то еще) может способствовать этой проблеме.
Проблема в том, что я использую сторонний компонент для рисования сетки (angular -grid, чтобы быть конкретным). Он только изменяет размеры столбцов, когда они специально вызывается из JavaScript, и также может быть настроен для этого после инициализации.
Проблема заключается в том, что столбцы не изменяются правильно. Они, по-видимому, изменяются до другого места. То, что я довольно уверен, происходит в том, что flexbox сначала рисует объекты без учета flex, а затем после загрузки вещей макет растягивается.
Предполагая, что я прав в своем предположении, я ожидал, что решение этого будет искать событие JavaScript (или JQuery или Angular) для прослушивания, когда оно изменило размер, а затем сообщит сетке, что ей необходимо перерисовать колонны. Это, как говорится, я не нашел такого события, так что, возможно, я неправильно подхожу к проблеме, или, может быть, я просто не выбрал наилучшие условия поиска.
Просто, чтобы помочь визуализировать проблему, вот пример HTML (сетка немного странная). (Стиль = "..." на самом деле определяется с помощью классов css или Angular Теги материалов - см. здесь.)
<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>
Спасибо за ваше время.