How to make lightning components auto resize in outlook?

Question

I have developed a lightning component for outlook and I'm wondering if there is a way to get the component to automatically resize when the user drags the side bar. The other components resize automatically but I can't find any documentation on what would be able to do this.

Some people have mentioned flexiPage or using aura:attribute name="width" to change the size of each tag but that seems excessive. Surely there's something you can put in the style component to do this for you. Does anyone have any ideas?

Aura:

<aura:component controller="EAP_Project_Class" implements="clients:availableForMailAppAppPage,clients:hasItemContext">


    <aura:attribute name="retProjects" type="list"/>
    <aura:attribute name="tell" type="String"/>
    <aura:attribute name="tell1" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />

  <div class="slds-box slds-theme_default" >  

      <!--////////////////heading and lightning icon//////////////-->

        <lightning:layout >
            <lightning:layoutItem >
                <lightning:icon iconName="custom:custom16" />
            </lightning:layoutItem>

            <lightning:layoutItem class="slds-m-left--small">
                 <h1 class="slds-page-header__title slds-p-right--x-small">Projects ({!v.retProjects.length}) </h1>
            </lightning:layoutItem>
        </lightning:layout>

      <!--////////////////////////////////////////////////-->

      <table class="slds-table ">
          <tbody> {!v.people.from.email}
        <aura:iteration items="{!v.retProjects}" var="project" indexVar="index">
             <tr>
               <div class="slds-truncate" title="{!project.Name}">
                 <a onclick="{!c.navigateToRecord}" data-index="{!index}">{!project.Name}
                 </a></div>
                  <div>&nbsp; Market: {!project.Market__c}</div>  
                  <div>&nbsp; Region: {!project.Region__c}</div>
             </tr>
         </aura:iteration>
         </tbody>
    </table>
  </div>
</aura:component>

CSS

.THIS{width:310px; padding: 10px; margin:12px}

Answer 1

Put a <div> tag around your entire component and Add SLDS_Size also remove any width tag from style component.