Should 100% be flex: 1 ?

[oney]

https://github.com/bernaferrari/FigmaToCode/blob/master/src/html/builderImpl/htmlSize.ts#L19

if (typeof size.width === "number") {
} else if (size.width === "full") {
  w += formatWithJSX("width", isJsx, "100%");
}

In flexbox, width: 100%; makes fixed width of neighbors wrong. Their fixed width won't be the assigned value. flex: 1; solves the issue.

[bernaferrari]

That's an excellent question. I don't know. I converted from Tailwind and Tailwind uses 100%, and it seems to work. Maybe the bug is somewhere else? I'll investigate.

Do you prefer flex: 1 or nothing, just the number, like width: 42px?

[oney]

Sorry. I didn't explain the problem well. https://www.figma.com/file/EyQ0Dck1wzPfg0thNeBnAM/Untitled?node-id=1%3A2

Yellow box: auto layout enabled (-> direction), fixed width, fixed height Blue box: fill container width, fixed height Green box: fill container width, fixed height Red box: fixed width(240px), fixed height

FigmaToCode plugin output:

<div style="padding: 20px; width: 843px; background-color: rgba(246.50, 239.56, 72.92, 1); display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
<div style="width: 100%; height: 292px; background-color: rgba(91.89, 88.83, 242.25, 1);"></div>
<div style="width: 10px;"></div>
<div style="width: 240px; height: 292px; background-color: rgba(242.25, 88.83, 98.03, 1);"></div>
<div style="width: 10px;"></div>
<div style="width: 100%; height: 292px; background-color: rgba(88.83, 242.25, 122.58, 1);"></div></div>

Red box's width is 103.28px not 240px

Then correct width: 100%; with flex: 1

<div style="padding: 20px; width: 843px; background-color: rgba(246.50, 239.56, 72.92, 1); display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
<div style="flex: 1; height: 292px; background-color: rgba(91.89, 88.83, 242.25, 1);"></div>
<div style="width: 10px;"></div>
<div style="width: 240px; height: 292px; background-color: rgba(242.25, 88.83, 98.03, 1);"></div>
<div style="width: 10px;"></div>
<div style="flex: 1; height: 292px; background-color: rgba(88.83, 242.25, 122.58, 1);"></div></div>

The widths of red, blue, green box are just the same as in figma.

[bernaferrari]

ohhhhhhh I got the issue. "100%" in html is so crap 😞.

I'm going to fix in both Tailwind and HTML, thanks!

[bernaferrari]

Updated version is now up!

[oney]

That's fast👍