Skip to content

Keep percentage flex columns on the same HTML row #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HarryCordewener merged 1 commit into from
Oct 7, 2026
Merged

Keep percentage flex columns on the same HTML row #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions MarkupString.Html/Emitters/LayoutHtml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,14 @@ private static void Rule(Rule rule, string kind, BorderStyle? border, HtmlLayout

private static void Flex(Flex flex, HtmlLayoutWriter html)
{
var items = flex.Items.IsDefault ? [] : flex.Items;
var spacing = flex.Separator is { } separator ? separator.DisplayWidth : Math.Max(0, flex.Gap);
var reserved = flex.Vertical ? 0 : spacing * Math.Max(0, items.Length - 1);
html.Write("<div class=\"ms-flex");
if (flex.Separator is not null) html.Write(" ms-divided");
if (flex.Vertical) html.Write(" ms-vertical");
html.Write("\" style=\"column-gap:");
html.Write(Number(flex.Separator is { } separator ? separator.DisplayWidth : Math.Max(0, flex.Gap)));
html.Write(Number(spacing));
html.Write("ch");
if (flex.Justify != FlexJustify.Start)
{
Expand All @@ -130,7 +133,7 @@ private static void Flex(Flex flex, HtmlLayoutWriter html)
}
html.Write("\">");

foreach (var block in flex.Items.IsDefault ? [] : flex.Items)
foreach (var block in items)
{
// Each item asks for its terminal width and grows to fill its row, so items that do not fit
// side by side wrap onto rows of their own. Spare width is left alone only when the layout
Expand All @@ -145,6 +148,8 @@ private static void Flex(Flex flex, HtmlLayoutWriter html)
html.Write(item.Basis.Kind switch
{
BlockSizeKind.Cells => Number(item.Basis.Value) + "ch",
BlockSizeKind.Percent when reserved > 0 && item.Basis.Value > 0 =>
"calc(" + Number(item.Basis.Value) + "% - " + Decimal(reserved * item.Basis.Value / 100.0) + "ch)",
BlockSizeKind.Percent => Number(item.Basis.Value) + "%",
_ => item.Min > 1 ? Number(item.Min) + "ch" : "0",
});
Expand Down
2 changes: 1 addition & 1 deletion MarkupString.Html/LayoutCss.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ public static class LayoutCss
".ms-border-none.ms-rule::before, .ms-border-none.ms-rule::after { border-top: none; }\n" +
".ms-flex { display: flex; flex-wrap: wrap; }\n" +
".ms-flex.ms-vertical { flex-direction: column; }\n" +
".ms-item { min-width: 0; }\n" +
".ms-item { min-width: 0; box-sizing: border-box; }\n" +
".ms-flex.ms-divided > .ms-item + .ms-item { border-left: 1px solid var(--ms-separator, var(--ms-separator-default, currentColor)); padding-left: 1ch; }\n" +
".ms-figure { display: flow-root; }\n" +
".ms-figure-image { max-width: 100%; height: auto; }\n" +
Expand Down
16 changes: 16 additions & 0 deletions MarkupString.Tests/Layout/BlockLayoutTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,22 @@ public async Task Flex_AutoItemsShareTheRest()
await Assert.That(BlockLayout.Lines(flex, 20)[0].ToPlainText()).IsEqualTo("a b c ");
}

[Test]
public async Task Flex_PercentageItemsLeaveRoomForTheirSeparatorInHtml()
{
var flex = new Flex(
[
T("left").Sized(BlockSize.Percent(50)),
T("right").Sized(BlockSize.Percent(50)),
])
{ Separator = P(" │ ") };

var html = BlockLayout.Build(flex, 40).Render(MarkupFormat.Html, Registry);

await Assert.That(html).Contains("flex:1 1 calc(50% - 1.5ch)");
await Assert.That(LayoutCss.Fixed).Contains(".ms-item { min-width: 0; box-sizing: border-box; }");
}

[Test]
public async Task Figure_TextFlowsRoundTheArt()
{
Expand Down
Loading