I have added XF component to a page and after giving the variation path to it, it is adding an extra margin to the XF component, due to which a horizontal scroll bar is getting added as shown in the screenshots below.
If we remove the margin , the issue will resolve. But I wanted to know what is the use of this class in /libs/cq/experience-fragments/components/xfpage/content.css and how to restrict the usage of the CSS for XF when any variation is added.
When dealing with XF, its good practice create and overlay your own xf base page (/apps/my-site/components/structure/xfpage). This gives flexibility to overlay existing scripts and files without doing tricky things like overwriting CSS or JS for the resources & components within /libs.
At a glimpse, /libs/cq/experience-fragments/components/xfpage/content.css looks like styles Adobe added to enhance the authoring experience or to ensure that the component has a min-height... looks to me that content.css is not significant, and will not cause any broken behavior, so your own xf base page, and overlay .content.css, and leave this file empty.