title: How to make Angular Material mat-select select list width automatic and adapt to the widest option?
body: <h1>Problem</h1>
  <p>I have a Angular 6.1.10 web app. I want the width of the mat-select list options to be automatic and adapt to the widest option in the options list. See the screenshot below:
  <a href="https://i.stack.imgur.com/w9IRC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w9IRC.png" alt="enter image description here" /></a></p>
  <h1>Code of the Page Showing the mat-select List</h1>
  <h2>HTML Code</h2>
  <pre><code>&lt;div class=&quot;all-container&quot;&gt;
    &lt;div class=&quot;top-border&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;content-container&quot;&gt;
  
      &lt;div *ngIf=&quot;statisticsPageToDisplay == 'surveyTemplateSelectionPage'&quot;&gt;
        &lt;div class=&quot;title&quot;&gt;
          Select a survey to view statistics for
        &lt;/div&gt;
        &lt;div class=&quot;survey-templates-container&quot;&gt;
          &lt;div class=&quot;survey-templates-scroll-list&quot;&gt;
            &lt;div *ngFor=&quot;let surveyTemplate of surveyTemplates&quot;&gt;
              &lt;app-statistics-page-survey-template-panel (onClickEmitter)=&quot;surveyTemplatePanelClicked($event)&quot;
                [surveyTemplate]=&quot;surveyTemplate&quot;&gt;&lt;/app-statistics-page-survey-template-panel&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div *ngIf=&quot;statisticsPageToDisplay == 'surveyTemplateStatistics'&quot;&gt;
  
        &lt;div class=&quot;top-buttons-row&quot;&gt;
          &lt;button mat-raised-button style=&quot;float: left; margin-top: 0.75%; margin-left: 1.5%&quot;
            (click)=&quot;selectAnotherSurveyTemplateClicked()&quot; [color]=&quot;'primary'&quot;&gt;
            &lt;i class=&quot;fas fa-chevron-left&quot;&gt;&lt;/i&gt;
            &lt;span style=&quot;margin-left: 0.75em !important&quot;&gt;Select another survey&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;mat-select-formatting&quot;&gt;
          &lt;mat-form-field&gt;
            &lt;div class=&quot;team-selection-list&quot;&gt;
  
              &lt;mat-select (selectionChange)=&quot;selectedTeamOptionChange()&quot; placeholder=&quot;Select team to view statistics for&quot;
                [(value)]=&quot;selectedTeamOption&quot;&gt;
                &lt;mat-select-trigger&gt;
                  &lt;i class=&quot;fas fa-building&quot;&gt;&lt;/i&gt;
                  &lt;span style=&quot;margin-left: 0.3em&quot;&gt;
                    {{selectedTeamOption?.companyRef?.name}}, 
                  &lt;/span&gt;
                  &lt;i class=&quot;fas fa-users&quot;&gt;&lt;/i&gt;
                  &lt;span style=&quot;margin-left: 0.3em&quot;&gt;
                    {{selectedTeamOption?.name}}
                  &lt;/span&gt;
                &lt;/mat-select-trigger&gt;
                &lt;mat-option *ngFor=&quot;let teamOption of teamOptions&quot; [value]=&quot;teamOption&quot;&gt;
                  &lt;i class=&quot;fas fa-building&quot;&gt;&lt;/i&gt;
                  &lt;span style=&quot;margin-left: 0.3em&quot;&gt;
                    {{teamOption?.companyRef?.name}}, 
                  &lt;/span&gt;
                  &lt;i class=&quot;fas fa-users&quot;&gt;&lt;/i&gt;
                  &lt;span style=&quot;margin-left: 0.3em&quot;&gt;
                    {{teamOption?.name}}
                  &lt;/span&gt;
                &lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/div&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        &lt;div class=&quot;title-row&quot;&gt;
          &lt;div class=&quot;title smallest-top-margin&quot;&gt;
            Statistics for survey {{currentStatisticsSurvey.title}} for team {{selectedTeamOption}}
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div *ngIf=&quot;redDataPoints != null &amp;&amp; yellowDataPoints != null &amp;&amp; greenDataPoints != null&quot;&gt;
          &lt;app-smileys-time-line-chart [redDataPoints]=&quot;redDataPoints&quot; [yellowDataPoints]=&quot;yellowDataPoints&quot;
            [greenDataPoints]=&quot;greenDataPoints&quot; (chartPointClicked)=&quot;chartPointClicked($event)&quot;&gt;
          &lt;/app-smileys-time-line-chart&gt;
        &lt;/div&gt;
  
        &lt;div *ngIf=&quot;selectedBarChartTime != null&quot;&gt;
          &lt;div class=&quot;title small-top-margin&quot;&gt;
            Category statistics for survey {{currentStatisticsSurvey.title}} for team {{selectedTeamOption}} at
            {{selectedBarChartTime.toLocaleDateString()}}
          &lt;/div&gt;
          &lt;app-categories-bar-chart [categoryStatistics]=&quot;barChartStatistics&quot;&gt;&lt;/app-categories-bar-chart&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h2>CSS Code</h2>
  <pre><code>.mat-raised-button {
      height: 1.5em !important;
      line-height: 1em !important;
      margin-bottom: 0.6em !important;
      text-align: left !important; 
      padding-left: 0.5em !important;
      padding-right: 1em !important;
      margin-left: 0 !important;
  }
  
  .mat-raised-button i {
      margin-bottom: 0.1em !important;
  }
  
  .all-container {
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
      box-shadow: none !important;
  }
  
  .top-border {
      height: 1px;
      width: 100%;
      margin: auto;
      border-top: 0.75px solid rgb(225, 225, 225);
  }
  
  .content-container {
      width: 98%;
      margin: auto;
      padding-top: 5px;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: flex-start;
      box-shadow: none !important;
  }
  
  .top-buttons-row {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: flex-start;
  }
  
  .title-row {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: stretch;
  }
  
  .title {
    color: rgb(150, 150, 150);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2em;
    width: 100%;
  }
  
  .survey-templates-container {
      width: 30vw;
      height: 65vh;
      margin-top: 15px;
      background-color: white;
      border-radius: 5px;
      box-shadow: 2.5px 2.5px 10px 1px rgb(225, 225, 225);
      border: 0.5px solid rgb(220, 220, 220);
      overflow: hidden;
  }
  
  .survey-templates-scroll-list {
      width: 98%;
      height: 98%;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 1%;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
  }
  
  ::ng-deep .mat-select-formatting .mat-form-field {
      margin-top: 7.5px !important;
      padding-top: 0px !important;
      padding-bottom: 5px !important;
      padding-left: 0px !important;
      padding-right: 0px !important;
      height: 2.5em !important;
      max-height: 2.5em !important;
      min-height: 2.5em !important;
      width: auto !important;
      max-width: 100% !important;
      color: rgb(125, 125, 125) !important;
  }
  
  .mat-select {
      width: 100% !important;
      min-width: 100% !important;
      max-width: 100% !important;
      cursor: pointer !important;
      color: rgb(125, 125, 125) !important;
  }
  
  .mat-select-content {
      width: 100% !important;
      min-width: 100% !important;
      max-width: 100% !important;
      cursor: pointer !important;
      padding-left: 1em !important;
      padding-right: 1em !important;
      color: rgb(125, 125, 125) !important;
  }
  
  .mat-select-placeholder {
      color: rgb(125, 125, 125) !important;
  }
  
  ::ng-deep .mat-select-value {
      width: auto;
      max-width: 100% !important;
      color: rgb(125, 125, 125) !important;
  }
  
  ::ng-deep .mat-select-value-text {
      color: rgb(125, 125, 125) !important;
  }
  
  .mat-select-panel {
      color: rgb(125, 125, 125) !important;
  }
  
  .mat-select-trigger {
      color: rgb(125, 125, 125) !important;
  }
  
  .mat-option {
      color: rgb(125, 125, 125) !important;
      height: 1.75em !important;
      min-height: 1.75em !important;
      max-height: 1.75em !important;
  }
  
  .mat-select:hover {
      cursor: pointer !important;
  }
  
  .mat-select:active {
      cursor: pointer !important;
  }
  
  .smallest-top-margin {
      margin-top: 7px;
  }
  
  .smaller-top-margin {
      margin-top: 10px;
  }
  
  .small-top-margin {
      margin-top: 15px;
      }
  </code></pre>
  <h2>TypeScript Code</h2>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { SurveyTemplateModel } from 'src/shared_classes/models/SurveyTemplateModel';
  import { AppAnswer } from 'src/shared_classes/app_models/AppAnswer';
  import { Answer } from 'src/shared_classes/app_models/Answer';
  import { AppQuestion } from 'src/shared_classes/app_models/AppQuestion';
  import { Question } from 'src/shared_classes/app_models/Question';
  import { Category } from 'src/shared_classes/app_models/Category';
  import { AppCategory } from 'src/shared_classes/app_models/AppCategory';
  import { SurveyTemplate } from 'src/shared_classes/app_models/SurveyTemplate';
  import { PageLoadHttpService } from 'src/service/page-load-http.service';
  import { StatisticsPageSurveyTemplatePanelComponent } from 'src/feature_components/statistics-page-survey-template-panel/statistics-page-survey-template-panel.component';
  import { SurveyHttpServiceService } from 'src/service/survey-http-service.service';
  import { GatheredTeamSurveyStatistics } from 'src/shared_classes/models/GatheredTeamSurveyStatistics';
  import { OrgReference } from 'src/shared_classes/models/property_classes/OrgReference';
  import { SurveyStatisticsDataPoint } from 'src/shared_classes/models/SurveyStatisticsDataPoint';
  import { LineChartDataSet } from 'src/shared_classes/other_data_classes/LineChartDataSet';
  import { TimeLineChartDataPoint } from 'src/shared_classes/models/TimeLineChartDataPoint';
  import { CategoryBarChartStatistic } from 'src/shared_classes/models/CategoryBarChartStatistic';
  import { TimePoint } from 'src/shared_classes/other_data_classes/Point';
  import { Team } from 'src/shared_classes/app_models/Team';
  
  @Component({
    selector: 'app-statistics-page',
    templateUrl: './statistics-page.component.html',
    styleUrls: ['./statistics-page.component.css']
  })
  export class StatisticsPageComponent implements OnInit {
  
    surveyTemplates: SurveyTemplate[];
    statisticsPageToDisplay: string;
    currentStatisticsSurvey: SurveyTemplate;
    teamOptions: Team[];
    selectedTeamOption: Team;
    greenDataPoints: TimeLineChartDataPoint[];
    yellowDataPoints: TimeLineChartDataPoint[];
    redDataPoints: TimeLineChartDataPoint[];
    barChartStatistics: CategoryBarChartStatistic[];
    allLoadedTeamStatistics: GatheredTeamSurveyStatistics[];
    selectedTeamStatisticsData: GatheredTeamSurveyStatistics;
    selectedBarChartTime: Date;
  
    constructor(private pageLoadHttpService: PageLoadHttpService,
      private surveyHttpService: SurveyHttpServiceService) { }
  
    ngOnInit() {
      this.statisticsPageToDisplay = &quot;surveyTemplateSelectionPage&quot;;
      this.surveyTemplates = [];
      this.loadSurveyTemplates();
    }
  
    loadSurveyTemplates() {
      this.pageLoadHttpService.getSurveyTemplates().subscribe((surveyTemplModels: SurveyTemplateModel[]) =&gt; {
        this.surveyTemplates = surveyTemplModels.map(surveyTemplModel =&gt;
          this.convertSurveyTemplateModelToSurveyTemplate(surveyTemplModel));
      });
    }
  
    loadSurveyStatisticsData(surveyTemplateGuid: string) {
      this.surveyHttpService.getTeamsSurveyStatisticsData(surveyTemplateGuid).subscribe((statisticsData: GatheredTeamSurveyStatistics[]) =&gt; {
        this.allLoadedTeamStatistics = statisticsData;
        this.useLoadedSurveyStatisticsData(statisticsData);
      });
    }
  
    useLoadedSurveyStatisticsData(statisticsData: GatheredTeamSurveyStatistics[]) {
      this.createTeamOptions(statisticsData);
      this.selectedTeamOption = this.teamOptions[0];
      this.selectedTeamStatisticsData = this.getSelectedTeamStatisticsData(statisticsData);
  
      this.createSmileyLineChart(this.selectedTeamStatisticsData.statisticsDataPoints);
    }
  
    getSelectedTeamStatisticsData(statisticsData: GatheredTeamSurveyStatistics[]): GatheredTeamSurveyStatistics {
      var selectedTeamStatisticsData: GatheredTeamSurveyStatistics;
      for (var i = 0; i &lt; statisticsData.length; i++)
        if (statisticsData[i].teamRef.guid == this.selectedTeamOption.guid) {
          selectedTeamStatisticsData = statisticsData[i];
          break;
        }
      return selectedTeamStatisticsData;
    }
  
    createGreenTimeLineChartDataPoint(dataPoint: SurveyStatisticsDataPoint): TimeLineChartDataPoint {
      var timeLineChartDataPoint: TimeLineChartDataPoint = {
        score: dataPoint.greenDataPoint.score,
        greenGoalLimit: dataPoint.greenGoalLimit,
        yellowGoalLimit: dataPoint.yellowGoalLimit,
        redGoalLimit: dataPoint.redGoalLimit,
        time: dataPoint.greenDataPoint.time
      };
      return timeLineChartDataPoint;
    }
  
    createYellowTimeLineChartDataPoint(dataPoint: SurveyStatisticsDataPoint): TimeLineChartDataPoint {
      var timeLineChartDataPoint: TimeLineChartDataPoint = {
        score: dataPoint.yellowDataPoint.score,
        greenGoalLimit: dataPoint.greenGoalLimit,
        yellowGoalLimit: dataPoint.yellowGoalLimit,
        redGoalLimit: dataPoint.redGoalLimit,
        time: dataPoint.yellowDataPoint.time
      };
      return timeLineChartDataPoint;
    }
  
    createRedTimeLineChartDataPoint(dataPoint: SurveyStatisticsDataPoint): TimeLineChartDataPoint {
      var timeLineChartDataPoint: TimeLineChartDataPoint = {
        score: dataPoint.redDataPoint.score,
        greenGoalLimit: dataPoint.greenGoalLimit,
        yellowGoalLimit: dataPoint.yellowGoalLimit,
        redGoalLimit: dataPoint.redGoalLimit,
        time: dataPoint.redDataPoint.time
      };
      return timeLineChartDataPoint;
    }
  
    createSmileyLineChart(statisticsDataPoints: SurveyStatisticsDataPoint[]) {
  
      var redDataPoints: TimeLineChartDataPoint[] = [];
      var yellowDataPoints: TimeLineChartDataPoint[] = [];
      var greenDataPoints: TimeLineChartDataPoint[] = [];
  
      statisticsDataPoints.forEach(dataPoint =&gt; {
        redDataPoints.push(this.createRedTimeLineChartDataPoint(dataPoint));
        yellowDataPoints.push(this.createYellowTimeLineChartDataPoint(dataPoint));
        greenDataPoints.push(this.createGreenTimeLineChartDataPoint(dataPoint));
      });
  
      redDataPoints.forEach(redDataPoint =&gt; {
        redDataPoint.time = new Date(redDataPoint.time);
      });
      yellowDataPoints.forEach(yellowDataPoint =&gt; {
        yellowDataPoint.time = new Date(yellowDataPoint.time);
      });
      greenDataPoints.forEach(greenDataPoint =&gt; {
        greenDataPoint.time = new Date(greenDataPoint.time);
      });
  
      this.redDataPoints = redDataPoints;
      this.yellowDataPoints = yellowDataPoints;
      this.greenDataPoints = greenDataPoints;
    }
  
    createBarChart(statisticsDataPoints: SurveyStatisticsDataPoint[]) {
    }
  
    surveyTemplatePanelClicked(clickedPanel: StatisticsPageSurveyTemplatePanelComponent) {
      this.openStatisticsPage(clickedPanel.surveyTemplate);
    }
  
    openStatisticsPage(surveyTemplate: SurveyTemplate) {
      this.currentStatisticsSurvey = surveyTemplate;
      this.statisticsPageToDisplay = &quot;surveyTemplateStatistics&quot;;
      this.loadSurveyStatisticsData(surveyTemplate.guid);
    }
  
    convertSurveyTemplateModelToSurveyTemplate(model: SurveyTemplateModel): SurveyTemplate {
      var appCategories: AppCategory[] = [];
      model.categories.forEach(c =&gt; {
        appCategories.push(this.convertCategoryToAppCategory(c));
      });
  
      var surveyTemplate: SurveyTemplate = {
        categories: appCategories,
        date: model.date,
        guid: model.guid,
        isChecked: false,
        companyGuids: model.companyGuids,
        teamGuids: model.teamGuids,
        userGuid: model.userGuid,
        title: model.title,
        info: model.info,
        defaultGreenGoalLimit: model.defaultGreenGoalLimit,
        defaultYellowGoalLimit: model.defaultYellowGoalLimit,
        defaultRedGoalLimit: model.defaultRedGoalLimit
      }
      return surveyTemplate;
    }
  
    convertCategoryToAppCategory(category: Category): AppCategory {
      var appQuestions: AppQuestion[] = [];
      category.questions.forEach(q =&gt; {
        appQuestions.push(this.convertQuestionToAppQuestion(q));
      });
  
      var appCategory: AppCategory = {
        questions: appQuestions,
        isChecked: false,
        title: category.title,
        nrGreenCategoryScores: category.nrGreenCategoryScores,
        nrYellowCategoryScores: category.nrYellowCategoryScores,
        nrRedCategoryScores: category.nrRedCategoryScores
      };
  
      return appCategory;
    }
  
    convertQuestionToAppQuestion(question: Question): AppQuestion {
      var appAnswers: AppAnswer[] = [];
      question.answers.forEach(a =&gt; {
        appAnswers.push(this.convertAnswerToAppAnswer(a));
      });
  
      var appQuestion: AppQuestion = {
        questionStr: question.questionStr,
        answers: appAnswers,
        pickedAnswer: null,
        isChecked: false
      };
  
      return appQuestion;
    }
  
    convertAnswerToAppAnswer(answer: Answer): AppAnswer {
      var appAnswer: AppAnswer = {
        answerStr: answer.answerStr,
        points: answer.points,
        isChecked: false
      };
  
      return appAnswer;
    }
  
    selectAnotherSurveyTemplateClicked() {
      this.statisticsPageToDisplay = &quot;surveyTemplateSelectionPage&quot;;
    }
  
    createTeamOptions(gatheredTeamsSurveyStatistics: GatheredTeamSurveyStatistics[]) {
      this.teamOptions = [];
      gatheredTeamsSurveyStatistics.forEach(gtss =&gt; {
        var team = this.getStatisticsDataTeam(gtss);
        this.teamOptions.push(team);
      });
      this.sortTeamOptions();
    }
  
    sortTeamOptions() {
      this.teamOptions.sort(this.compareTeamNames);
    }
  
    compareTeamNames(a:Team, b:Team): number {
      var companyNameComparison = a.companyRef.name.toLowerCase().localeCompare(b.companyRef.name.toLowerCase());
      
      if(companyNameComparison !== 0)
        return companyNameComparison;
  
      return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
    }
  
    selectedTeamOptionChange() {
      console.log(&quot;Selected team: &quot; + this.selectedTeamOption);
      this.selectedTeamStatisticsData = this.getSelectedTeamStatisticsData(this.allLoadedTeamStatistics);
      this.createSmileyLineChart(this.selectedTeamStatisticsData.statisticsDataPoints);
      this.selectedBarChartTime = null;
    }
  
    chartPointClicked(timePoint: TimePoint) {
      this.updateBarChart(timePoint);
    }
  
    updateBarChart(timePoint: TimePoint) {
      for (var i = 0; i &lt; this.selectedTeamStatisticsData.statisticsDataPoints.length; i++) {
        if ((new Date(this.selectedTeamStatisticsData.statisticsDataPoints[i].greenDataPoint.time)).getTime() == (new Date(timePoint.x)).getTime()) {
          this.barChartStatistics = this.selectedTeamStatisticsData.statisticsDataPoints[i].categoryBarChartStatistics;
          break;
        }
      }
      this.selectedBarChartTime = timePoint.x;
    }
  
    getStatisticsDataTeam(statisticsData: GatheredTeamSurveyStatistics): Team {
      return new Team (
        statisticsData.teamRef.name,
        statisticsData.teamRef.guid,
        null,
        null,
        null,
        null,
        null,
        statisticsData.companyRef,
        null,
        null,
        null,
        null,
        null,
        null,
        null
      );
    }
  
  }
  
  </code></pre>
  <h1>Final Thoughts and Question</h1>
  <p>I have tried lots of different CSS code and inspecting the mat-select in the Chrome browser. But nothing has worked so far. How can I make the mat-select options list width be automatic and adapt to the widest option in the list so that they don't clip?</p>
  <p>Thanks!</p>