Using FlowType.js with MatchHeight.js

[Dabalina]

I have a page where I have 5 blocks with text and images in them. They are organized in a row and I am using matchheight.js to keep them all the same height and Flowtext so the text will be the correct size within the boxes as they resize. However when the page first loads some of the boxes have different size text than the others - even though they all have the same base font size and the boxes are the same size. When I adjust the size of the window everything recalculates and the font sizes are all uniform. Is there a way to trigger the recalculation without resizing the window.

Here is a codepen: http://codepen.io/dll416/pen/xgeeoz

The viewport has to be 1200px or below to see the issue.

[christhebishop]

Hey @Dabalina, thanks for reaching out! Unfortunately, I'm pretty busy with other projects at the moment, so it may be a week or so before I'm able to spend time looking into this. Please be sure to let me know if you find a solution before I get a chance to look into it. In the meantime, good luck and thanks for using FlowType.JS!

[Dabalina]

Hi @christhebishop thanks for the heads up - upon further analyzing - it looks like the matchheight.js has nothing to do with it and it is the use of flexbox in the css that is causing the issue. When I remove flexbox and use a percentage based width only, FlowType.js seems to work as expected. I have indicated through commenting the flex css that I removed that made the codepen work as expected. I would prefer to use flexbox on this page - is there a way to make them work together?

[christhebishop]

Hey @Dabalina thanks for the update! Unfortunately, FlowType.JS was written before flexbox was introduced, so I can't guarantee that it works out of the box with flexbox. That being said, I had a few moments today, so I pulled your code out of codepen to test it. When I reverted the styles back to your flexbox styles, it appeared to be working for me. See the attached files below to see what I did- I just used your styles and markup with the JS libraries you're calling in. I'm not sure if some of the base codepen styles or scripts are causing conflicts or something, but it seemed to work for me when I pulled it out of codepen. Let me know if that helps at all. Thank you!

FlowType-TEST.zip