Lighting:tabset rendering tabs in "more" drop down when tabs are populated dynamically even though it has enough space to display all tabs

My expected result should be, all tabs display in one line with out “more” option by using dynamic code.

When i tried dynamic code, Tabset displays only 3 names and rest of them in more option as show below even though it has enough space to display all values.

Below is the code.
===DYNAMIC CODE====

<lightning:tabset>
   <!-- Dynamic, but displays on 3 tabs and more option for other tabs -->
         <aura:iteration items="{!v.systemNames}" var="sys">
               <lightning:tab label="{!sys}" id="{!sys}"/>
          </aura:iteration>    
</lighitng:tabset>

When i hard code the same list in component itself, all of them are displaying as expected.

=======HARDCODED=======

<lightning:tabset>
     <!-- Hard coded the names to display all of them in one set -->
      <lightning:tab label="AMBPL" id="AMBPL"/>
       <lightning:tab label="AUGPL" id="AUGPL"/>
       <lightning:tab label="CLVNR" id="CLVNR"/>
       <lightning:tab label="DELTA" id="DELTA">
                 ....
                 ....
</lightning:tabset>