Back to Toolkit
Google Search Verified Fix

How to Fix CSS Flexbox Collapse in Outlook 2013
for Klaviyo Campaigns

A programmatic integration guide for resolving email rendering crashes inside Outlook 2013 using Klaviyo's layout editor environment.

Root Bug Analysis

Outlook 2013 utilizes the MS Word MSO rendering engine on desktop, which parses blocks strictly in source order and completely ignores CSS display properties like flex and grid. Columns collapse to 100% width and stack vertically.

Active rendering engine: Microsoft Word (MSO)

Klaviyo Specific Guide

Klaviyo's drag-and-drop template editor wraps user code in proprietary 'kl-part' class selectors that enforce fixed inline layouts. This locks the collapsed stack structure inside Outlook. Explicit inline table cell widths must be applied to override Klaviyo's styles.

Integration Step:

Open your Klaviyo template editor. Drag an 'HTML' block directly into your layout timeline (do not use a standard text box). Clear the default skeleton content inside the Klaviyo markup editor and paste the RenderOps corrected inline code.

ESP Unsubscribe Alignment

When compiling custom HTML templates for Klaviyo, you must ensure your layout retains deliverability compliance loops. Klaviyo requires you to insert their specific unsubscribe merge tag, otherwise your campaign delivery will be flagged by automated spam audits.

Klaviyo Unsubscribe Tag:{% unsubscribe %}

Documented Client Behavior

Expected layout behavior based on target rendering engine specifications:

Documented behavior: Flex containers collapse elements to vertical stacks in Outlook 2013 desktop client. Spacing and column floats collapse unless structured using nested tables.

Interactive Klaviyo Custom Sandbox

Target Environment: Outlook 2013

Auto-compile fixes inside RenderOps Workspace

Load layout code directly into our Retrofit Compiler to compile responsive table frameworks that display cleanly in Outlook 2013.

Launch Retrofit Compiler