Sizing the layoutitems based on size of the top container and not the viewport

Question

We have built a lightning component which is to be used on the record home page. Now the user can either add the component in the side or in the detail section itself. Everything is working fine except the sizing of the containers.

We have used the lightning:layout and lightning:layoutItem to add the components and as per the documentation it works as per the viewport size and not the size of the parent container.

Component in side bar:

Component in the record Detail page

Now, the component appears perfectly fine in the detail page section with 3 column layout, but when the same component is added in the side bar the expectation is that it automatically should resize to one column layout and the 3 components should appear one below the other and that is not happening. I tried with couple of options on the lightning:layout but that didn't work. Need help here!

Lightning code:

<lightning:layout multipleRows="true">
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="12" largeDeviceSize="4" padding="around-small" flexibility="auto">
                ------COntent of section One------ 
        </lightning:layoutItem>
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="12" largeDeviceSize="4" padding="around-small" flexibility="auto">
            -----COntent of section two------
        </lightning:layoutItem>
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="12" largeDeviceSize="4" padding="around-small" flexibility="auto">
            -----COntent of section Three------
        </lightning:layoutItem>
        </lightning:layout>

Answer 1

So the solution was to use the lightning:flexipageRegionInfo component which will provide the width and then the sections could be rendered accordingly.

Reference Link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_width_aware.htm