responsive-email
responsive-email copied to clipboard
Content stretching
Each ResponsiveColumn has display: inline-block, but it happened to me that I needed to use display: inline-table.
Here is the code to show you what I mean by using the classic Row and Column:
<Section>
.....
<Row>
<Column>
<Section className="inline-block max-w-[900px]"> <-- Problem resolved by changing to inline-table
<Row>
<Column className="bg-red-500">
<Text className="">
{"{{message}}"}
</Text>
</Column>
</Row>
</Section>
<Section className="inline-table w-6"></Section>
<Section className="inline-table w-[28%]">
<Row>
<Column>
IMAGE
</Column>
</Row>
</Section>
</Column>
</Row>
.....
</Section>
With inline-block the first red column (table) takes the width of its content (wrong):
With inline-table the first column (table) stretches to fill the remaining space (desired result):
Proposal
Add a new property to ResponsiveColumn to control content streching.
Something like this:
<ResponsiveColumn strechContent={true|false}>