How to make a flex child follow the size of a sibling

Question

I have two children inside my flex container. The first one is a radio button group and the second one is a text. I would like the text to not exceed the width of the radio button group at any screen size. I do not know how to do it. Can you help me with this? I am sharing the code in stackblitz.

https://stackblitz.com/edit/angular-material-radio-button-demo-faar2f

Following is the html code:

<div class="container">
    <mat-radio-group>
        <mat-radio-button value=1> 1 </mat-radio-button>
        <mat-radio-button value=2> 2 </mat-radio-button>
        <mat-radio-button value=3> 3 </mat-radio-button>
        <mat-radio-button value=4> 4 </mat-radio-button>
        <mat-radio-button value=5> 5 </mat-radio-button>
        <mat-radio-button value=6> 6 </mat-radio-button>
        <mat-radio-button value=7> 7 </mat-radio-button>
        <mat-radio-button value=8> 8 </mat-radio-button>
    </mat-radio-group>
    <div> This is the text content that I would like to always have
          a width lesser than the radio betton button group. 
    </div>
</div>

Following is the css code:

.container {
  display: flex;
  flex-direction: column;
}

https://stackoverflow.com/questions/52615329/make-flex-item-siblings-the-same-height — Majid Ali, Dec 04 '20 at 05:54
Thank you @MajidAli. So, it is not possible to do it using CSS. — Vinay, Dec 04 '20 at 06:04

score 1 · Accepted Answer · answered Dec 04 '20 at 06:30

Output:

I have made the following changes and it seems to work fine:

//app.conponent.html

<div class="container">
    <mat-radio-group class="radioGroup">
        <mat-radio-button class="radio" value=1> 1 </mat-radio-button>
        <mat-radio-button class="radio" value=2> 2 </mat-radio-button>
        <mat-radio-button class="radio" value=3> 3 </mat-radio-button>
        <mat-radio-button class="radio" value=4> 4 </mat-radio-button>
        <mat-radio-button class="radio" value=5> 5 </mat-radio-button>
        <mat-radio-button class="radio" value=6> 6 </mat-radio-button>
        <mat-radio-button class="radio" value=7> 7 </mat-radio-button>
        <mat-radio-button class="radio" value=8> 8 </mat-radio-button>
    </mat-radio-group>
    <p> This is the text content that I would like to always have a width lesser than the radio betton button group.
    </p>
</div>

and css style:

.container {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 480px;
}

.radioGroup {
  display: flex;
  flex-wrap: wrap;
}
p {
  text-align: justify;
}

.radio {
  background-color: yellow;
  min-width: 60px;
  flex: 1;
}

Stackblitz link

How to make a flex child follow the size of a sibling

1 Answers1