Flex container and text don't shrink to fit screen width

Question

I want to display the information given in the picture below

The only problem is that it won't shrink when I check for responsibility. The margin only on the right side goes away and the text flows off the page.

When I try the responsive developer tools for an Iphone X it looks weird like this:

I am out of ideas on what to do. Here is my HTML and CSS (I use angular for variable names, so if you want to replicate just put random text in):

CSS:

    .mainContainer{
        margin: 0px 10px 10px 10px;
    }

    .maskDetails {
        display: flex;
        flex-direction: column;
    }
  
    .detail {
        flex: 50%;
        padding-left: 10px;
        padding-right: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .taskSelect{
        display: flex;
        column-gap: 10px;
    }

    .taskDescription{
        width: 100%;
    }

    .description{
        font-size: medium;
    }

    h4{
        font-size: medium;
    }

    .descriptionT{
        font-size: medium;
    }

    .detail:nth-child(odd) {
        background-color: #eeee;
    }

HTML:

 <div class="mainContainer">

  <div class="maskSelect">
    <div>
      <h4>Maske:</h4>
    </div>
    <mat-form-field appearance="fill" matTooltip="Bitte die Maske angeben, welche beim Arbeiten getragen wird.">
      <mat-label>Maske</mat-label>
      <mat-select [formControl]="maskControl" required>
        <mat-option *ngFor="let mask of masks" [value]="mask">
          {{mask.name}}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="maskControl.hasError('required')">Bitte Maskenart auswählen.</mat-error>
    </mat-form-field>
  </div>
  <div class="maskDetails" *ngIf="!(mask.name==''||mask.name=='---')">
    <div class="detail">
      <h4>Name:</h4>
      <p>{{mask.name}}</p>
    </div>
    
    <div class="detail">
      <h4>Beschreibung:</h4>
      <p>{{mask.bemerkung}}</p>
    </div>

    <div class="detail">
      <h4>Schutzniveau:</h4>
      <p>{{mask.schutzniveau}}</p>
    </div>

    <div class="detail">
      <h4>Gebrauchsdauer [min]:</h4>
      <p>{{mask.gebDauer}}</p>
    </div>

    <div class="detail">
      <h4>Erholungsdauer [min]:</h4>
      <p>{{mask.erhoDauer}}</p>
    </div>

    <div class="detail">
      <h4>Gebrauchsdauer/Schicht [min]:</h4>
      <p>{{mask.proSchicht}}</p>
    </div>

    <div class="detail">
      <h4>AMR Gruppe:</h4>
      <p>{{mask.amr}}</p>
    </div>
    
  </div>
<div class="taskContainer">
  <div class="taskSelect">
    <div class="group" matTooltip="Bitte wählen Sie hier Ihren groben Tätigkeitsbereich aus.">
      <h4>Tätigkeitsbereich:</h4>
      <mat-form-field appearance="fill">
        <mat-label>Tätigkeitsbereich</mat-label>
        <mat-select [formControl]="taskControl" required>
          <mat-option *ngFor="let g of groups.group" [value]="g">
            {{g.name}}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="taskControl.hasError('required')">Bitte einen Bereich auswählen.</mat-error>
      </mat-form-field>
    </div>
    <div class="task"
      matTooltip="Bitte spezifische Tätigkeit auswählen. Lesen Sie sich bitte hierfür die Beschreibung durch.">
      <h4>Tätigkeit:</h4>
      <mat-form-field appearance="fill">
        <mat-label>Tätigkeit</mat-label>
        <mat-select [formControl]="tControl" required>
          <mat-option *ngFor="let t of task" [value]="t">
            {{t.name}}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="taskControl.hasError('required')">Bitte mindestens eine Tätigkeit auswählen.</mat-error>
      </mat-form-field>
    </div>
  </div>
</div>
<div style="width: 100%;" *ngIf="!(t.name==''||t.name==' ')">
  <table class="taskDescription">
    <tr style="width: 100%;">
      <td class="description">
        Bezeichnung:
      </td>
      <td class="descriptionT">
        {{t.name}}
      </td>
    </tr>
    <tr style="width: 100%;">
      <td class="description">
        Beschreibung:
      </td>
      <td class="descriptionT">
        {{t.beschreibung}}
      </td>
    </tr>
    <tr style="width: 100%;">
      <td class="description">
        Faktor Arbeitsschwere:
      </td>
      <td class="descriptionT">
        {{t.arbeitsschwere}}
      </td>
    </tr>
  </table>
</div>
<div *ngIf="ergebnis.gebrauch!=0">
  <h2>Errechnete Gebrauchsdauer: {{ergebnis.gebrauch}} min bis zur Erholung.</h2>
  <h2>Errechnete Gebrauchsdauer/Schicht: {{ergebnis.schicht}} min.</h2>
</div>
</div>

Answer 1

your code has no problems, is this what you want?

EDIT the flex:50%; is effextless. also flex-wrap and align-items not should placed for .detail

.mainContainer {
  margin: 0px 10px 10px 10px;
}

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

.detail {
  padding-left: 10px;
  padding-right: 10px;
}

.taskSelect {
  display: flex;
  column-gap: 10px;
}

.taskDescription {
  width: 100%;
}

.description {
  font-size: medium;
}

h4 {
  font-size: medium;
}

.descriptionT {
  font-size: medium;
}

.detail:nth-child(odd) {
  background-color: #eeee;
}

<div class="mainContainer">

  <div class="maskSelect">
    <div>
      <h4>Maske:</h4>
    </div>
    <mat-form-field appearance="fill" matTooltip="Bitte die Maske angeben, welche beim Arbeiten getragen wird.">
      <mat-label>Maske</mat-label>
      <mat-select [formControl]="maskControl" required>
        <mat-option *ngFor="let mask of masks" [value]="mask">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </mat-option>
      </mat-select>
      <mat-error *ngIf="maskControl.hasError('required')">Bitte Maskenart auswählen.</mat-error>
    </mat-form-field>
  </div>
  <div class="maskDetails" *ngIf="!(mask.name==''||mask.name=='---')">
    <div class="detail">
      <h4>Name:</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

    <div class="detail">
      <h4>Beschreibung:</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

    <div class="detail">
      <h4>Schutzniveau:</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

    <div class="detail">
      <h4>Gebrauchsdauer [min]:</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

    <div class="detail">
      <h4>Erholungsdauer [min]:</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

    <div class="detail">
      <h4>Gebrauchsdauer/Schicht [min]:</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

    <div class="detail">
      <h4>AMR Gruppe:</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>
  <div class="taskContainer">
    <div class="taskSelect">
      <div class="group" matTooltip="Bitte wählen Sie hier Ihren groben Tätigkeitsbereich aus.">
        <h4>Tätigkeitsbereich:</h4>
        <mat-form-field appearance="fill">
          <mat-label>Tätigkeitsbereich</mat-label>
          <mat-select [formControl]="taskControl" required>
            <mat-option *ngFor="let g of groups.group" [value]="g">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </mat-option>
          </mat-select>
          <mat-error *ngIf="taskControl.hasError('required')">Bitte einen Bereich auswählen.</mat-error>
        </mat-form-field>
      </div>
      <div class="task" matTooltip="Bitte spezifische Tätigkeit auswählen. Lesen Sie sich bitte hierfür die Beschreibung durch.">
        <h4>Tätigkeit:</h4>
        <mat-form-field appearance="fill">
          <mat-label>Tätigkeit</mat-label>
          <mat-select [formControl]="tControl" required>
            <mat-option *ngFor="let t of task" [value]="t">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </mat-option>
          </mat-select>
          <mat-error *ngIf="taskControl.hasError('required')">Bitte mindestens eine Tätigkeit auswählen.</mat-error>
        </mat-form-field>
      </div>
    </div>
  </div>
  <div style="width: 100%;" *ngIf="!(t.name==''||t.name==' ')">
    <table class="taskDescription">
      <tr style="width: 100%;">
        <td class="description">
          Bezeichnung:
        </td>
        <td class="descriptionT">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.{{t.name}}
        </td>
      </tr>
      <tr style="width: 100%;">
        <td class="description">
          Beschreibung:
        </td>
        <td class="descriptionT">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </td>
      </tr>
      <tr style="width: 100%;">
        <td class="description">
          Faktor Arbeitsschwere:
        </td>
        <td class="descriptionT">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </td>
      </tr>
    </table>
  </div>
  <div *ngIf="ergebnis.gebrauch!=0">
    <h2>Errechnete Gebrauchsdauer: {{ergebnis.gebrauch}} min bis zur Erholung.</h2>
    <h2>Errechnete Gebrauchsdauer/Schicht: {{ergebnis.schicht}} min.</h2>
  </div>
</div>