Template talk:Flexbox wrap

Layout of OL/UL lists are problematic, narrow columns

The default layout for the flexbox template has two critical issues.

1) When a list is used, the bullets are drawn on top of the border of the flexbox, meaning there is insufficient padding on UL/OL elements that are contained in the Flexbox. This should be remedied in CSS specific to child elements of the Flexbox.

2) The minimum width is quite narrow, as visible on the Mathematics Portal layout where the columns are hardly wide enough for 2 words.

This should be remedied through a min-width setting, or passing through the style attribute or min/max width attributes. — RossO (talk) 00:15, 8 July 2025 (UTC)

User:Spesh531 - Can we discuss this? Can you see the two things I was trying to fix in the Math portal? Can we put the minimum column width back in? — RossO (talk) 03:24, 10 August 2025 (UTC)

I assume you're referring to the columns in Portal:Mathematics/MathematicsTopics? (It's always easier to see an example in use.) Regarding the positioning of the lists: they are wholly contained within the individual div elements enclosing each component. I feel the icons in the headings are what make the positioning appear awkward. In general, the template was not designed to impose layout upon the component elements within the flexbox layout, so I don't think it's a good idea to have style rules specific to the contents of the components. That's better handled by the components themselves.

Regarding a minimum width, I've created a sandbox version of the template and updated the test cases to show both production and sandbox output. I'll experiment in the sandbox with a parameter that sets the min-width property. Given the original design intent to allow components to control their own layout, though, I don't think it's a good idea to set a minimum width by default. isaacl (talk) 16:42, 10 August 2025 (UTC)

I've added a |min_width= parameter. See Template:Flexbox wrap/doc for documentation. isaacl (talk) 17:22, 10 August 2025 (UTC)

Thank you isaacl! This was a perfect fix for this page's needs. That plus taking out some 20 year old CSS has righted the ship. Thanks for the help! If there's just one more thing that could be done, it would be that the min width set on the `start` tag would be auto applied to the sibling `break` tags, but that's not critical here. — RossO (talk) 19:57, 15 September 2025 (UTC)

One template invocation doesn't have access to another template invocation. (A more elaborate implementation in Lua could theoretically read and search the source of the page, but there would have to be a parameter with a common identifier for each template call to link them, and the whole implementation becomes too heavy for my tastes.) Originally I tried to design the template so that each component would be a parameter to the template. Having to use workarounds to deal with template parameter processing, though, made it too hard to use for my needs, and I switched to using multiple template invocations. isaacl (talk) 23:59, 15 September 2025 (UTC)

Bravo on the work and the result. — RossO (talk) 02:26, 16 September 2025 (UTC)