This is a problem I have been seeing accross the board on our newest Hubspot build. For some reason on seemingly random modules row-fluid doesn't actually get to 100% width on Mobile. Here is a screenshot of what I mean. Removing the display: flex; fixes the issue as well.
Basically on several Dnd Modules accross the site there are 1-2 span units being added to the right on modules that are drag and drop.
Anyone have a solution to this or run into it before?
This seems like Flexbox's standard behaviour. The divs width is being adjusted automatically to its children's content. The highlighted purple area is just the area that's left to fill. Nothing is being added. It is visually telling you there is empty space that is potentially fillable. If there is more content within Row-fluids children's divs, it will automatically stretch to fill the remaining space. For example, you will see the purple area grow/shrink if you change "Privacy Policy" to something else.
This isn't a problem on its own. The Row-fluid div will stretch to as large as its parent div will allow, so I'm not certain there is a problem to resolve. Please provide more details regarding what problem this is causing, which might help us understand what needs to be fixed. 🙂
This seems like Flexbox's standard behaviour. The divs width is being adjusted automatically to its children's content. The highlighted purple area is just the area that's left to fill. Nothing is being added. It is visually telling you there is empty space that is potentially fillable. If there is more content within Row-fluids children's divs, it will automatically stretch to fill the remaining space. For example, you will see the purple area grow/shrink if you change "Privacy Policy" to something else.
This isn't a problem on its own. The Row-fluid div will stretch to as large as its parent div will allow, so I'm not certain there is a problem to resolve. Please provide more details regarding what problem this is causing, which might help us understand what needs to be fixed. 🙂