Fork me on GitHub

re-com question: What should I do in a situation where the content of a h-box isn't guaranteed to fit in one row?


i have some cases where it is flowing past the right hand edge of the box


from a bit of googling it seems like there is a property flex-wrap that may solve this


as a test i try to assign a :style {:flex-flow "wrap"} but that seems to be missing and it's getting a default flex-flow: row nowrap


manually changing the CSS style from nowrap to wrap seems to make no difference either


i really hate s/CSS/visual layout/


Using http-fx.. what do I need to pass to get a text response-format? - never mind, got it. Was just slightly confused.


@lovuikeng other than clipping & scrolling not being a behaviour I want, I'm not sure how that overlaps with flexbox?


What is slightly more bothersome is that flex-flow: row wrap doesn't


sorry, @sandbags flex layout seems to be known complicated issue.. might need to use box as children........ "If you need to introduce leaf nodes into a layout and they are not already correctly styled for use as flexbox items, then wrap them in (make them the child of) a [box ..]."


@sandbags You need to be a little more forceful because re-com uses the flex-flow style and specifies "row nowrap". So, all you need to do is:

 :style {:-webkit-flex-flow "row wrap" :flex-flow "row wrap"}
 :children [...]]

and it should work. You could also require the namespace which will give you access to a little helper function to allow you to simplify the code:
 :style (flex-flow-style "row wrap")
 :children [...]]


@gregg thanks ... unfortunately this still does not seem to be working. Inspecting the div corresponding to the h-box I see style="flex-flow: row wrap;" but the items are still sprawling over the righthand edge of the box. Not sure what I am missing here.


Hmmm, I just tested it myself, so it certainly can work. Does the parent of the h-box have a specific width?


it's nested in a v-box that's using all default attributes


Give me a moment and I will come up with some working code which may help


oh that's kind of you, thank you