Align the width of a component to its parent component

Question

I am dynamically creating lightning buttons using the lightning:buttongroup component. I want to have the contents inside it wrap within the width and the height setting of the component.

Component:

<div class="slds-p-around_medium nnUnits_wrap" >
                <lightning:card title="NN Units">
                    <lightning:buttonGroup>
                        <aura:iteration items="{!v.building.nnUnitsList}" var="b">
                            <lightning:button disabled="true">
                                <div style="color:grey">
                                    <div class="slds-align_absolute-center">{! b}</div>         
                                </div>
                            </lightning:button>  
                        </aura:iteration>
                    </lightning:buttonGroup> 
                </lightning:card>
            </div>

CSS:

.THIS.nnUnits_wrap {
    min-width: 100px;
    max-width: 200px;
}

This is the way it is displaying as of now, the buttons go beyond the width of the component.

Edit 23/12/2020

<lightning:card class="slds-text-title_bold" title="Address Penetration">        
    <div class="slds-p-around_medium">
        <lightning:layout>
            <lightning:layoutItem flexibility="auto" padding="horizontal-medium">
                <lightning:buttonGroup>
                    <lightning:button disabled="true">
                        <div style="color:black">
                            <div>Total Units</div>
                            <div class="slds-align_absolute-center">{! v.building.activeUnits + v.building.coldUnits + v.building.neverUnits}</div>         
                        </div>
                    </lightning:button>
                    <lightning:button onclick="{!c.getNeverUnits}">
                        <div style="color:grey">
                            <div>Never</div>
                            <div class="slds-align_absolute-center">{! v.building.neverUnits }</div>         
                        </div>
                    </lightning:button>
                </lightning:buttonGroup>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto, no-grow" padding="horizontal-medium">
                <div style="color:white;background-color:blue">
                    <lightning:button disabled="true">
                        <div >
                            <div>Penetration</div>
                            <lightning:formattedNumber class="slds-align_absolute-center" style ="percent-fixed" value="{! (v.building.activeUnits / (v.building.activeUnits + v.building.coldUnits + v.building.neverUnits)) * 100 }"/>
                        </div>
                    </lightning:button>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
        
        
        <div class="slds-p-around_medium nnUnits_wrap" >
            <aura:If isTrue="{!v.cc_nn =='nn'}">
                <lightning:card title="NN Units">
                    <lightning:buttonGroup>
                        <aura:iteration items="{!v.building.nnUnitsList}" var="b">
                            <lightning:button disabled="true">
                                <div style="color:grey">
                                    <div class="slds-align_absolute-center">{! b}</div>         
                                </div>
                            </lightning:button>  
                        </aura:iteration>
                    </lightning:buttonGroup> 
                </lightning:card>
                <aura:set attribute="else">
                    No records as of now.
                </aura:set>
            </aura:If>
        </div>           
    </div>
</lightning:card>

CSS

    .THIS.nnUnits_wrap {   
    max-height: 400px;
    overflow: auto;
}

.THIS.displayInline {
    display: inline-block;
}

Answer 1

The issue here is you have given your parent div very small and you are expecting the child components to be fit inside that.

What you can do here is you can put a scroll in the parent div by this:

.THIS.nnUnits_wrap {
    min-width: 100px;
    max-width: 200px;
    overflow: auto;
}

and tell child div to adjust accordingly, This will introduce a scroll bar in your component.

.THIS .displayInline {
    display:inline-block;
}

---

  <lightning:card title="NN Units" class="displayInline">
     <lightning:buttonGroup>
        <aura:iteration items="{!v.unitList}" var="b">
           <lightning:button disabled="true">
              <div style="color:grey">
                 <div class="slds-align_absolute-center">{! b}</div>
              </div>
           </lightning:button>
        </aura:iteration>
     </lightning:buttonGroup>
  </lightning:card>

UPDATE

I was hoping you could do some tweak and figure out an answer.

But here is an example:

  <div class="slds-p-around_medium nnUnits_wrap" >
     <lightning:card title="NN Units" class="displayInline">
        <lightning:buttonGroup class="verticalGrid">
           <aura:iteration items="{!v.unitList}" var="b">
              <lightning:button disabled="true" class="maxWidthForButton">
                 <div style="color:grey">
                    <div class="slds-align_absolute-center">{! b}</div>
                 </div>
              </lightning:button>
           </aura:iteration>
        </lightning:buttonGroup>
     </lightning:card>
  </div>

---

.THIS.nnUnits_wrap {
    min-width: 100px;
    max-width: 400px;
    max-height: 200px;
    overflow: auto;
}

.THIS .displayInline {
    display:inline-block;
}

.THIS .verticalGrid{
    display: block !important;
}

.THIS .maxWidthForButton{
    width: 5rem;
}

---