div elements not repositioning when using justify-content: space-between

Question

I have a flexbox with 2 element groups in it, one for likes and favorites the other for social media sharing. I want the first one to be on the left end and the right one to be on the other end. I want to use justify-content: space-between for that but the elements remain fixed in the same position. I could use a hack by shifting the elements using padding-left but i much rather use justify-content, only its not working. Some suggestions would be welcome, thank you. Here is a screenshot of what it currently looks like (the red arrows indicate where the 2 groups should be), below that there i have posted the code.

HTML:

<div class="flexBox flexItem">
              <div class="summary">
                <div class="flexBox flexItem test">
              <ul class="details">
                <li><strong>Days until harvest:</strong>   {{seedDetails.growthTime}}</li>
                <li><strong>Required sun exposure:</strong> {{sunExposure}}</li>
                <li><strong>Plant height:</strong> {{seedDetails.plantHeight | measure : distancePipeArgument : true}}</li>
                <li><strong>Plant width:</strong> 15 inch</li>
              </ul>

              <ul class="details">
                <li><strong>Germinates after:</strong> 14 days</li>  
                <li><strong>Germination temperature:</strong> {{seedDetails.growthTemperature | measure: temperaturePipeArgument : true}}</li>
                <li><strong>Row spacing:</strong> {{seedDetails.rowSpacing | measure : distancePipeArgument : true}}</li>
                <li><strong>Plant spacing:</strong> {{seedDetails.plantSpacing | measure : distancePipeArgument : true}}</li>
              </ul>

              <ul class="details">
                <li><strong>Sow depth:</strong> {{seedDetails.sowDepth | measure : distancePipeArgument : true}}</li>
                <li><strong>Life cycle:</strong> {{seedDetails.lifeCycleType | titlecase}}</li> 
                <li><strong>Hardy at:</strong> {{seedDetails.hardiness | measure: temperaturePipeArgument : true}}</li>
                <li><strong>Maximum temperature:</strong> {{seedDetails.maximumTemperature | measure: temperaturePipeArgument : true}}</li>
              </ul>
                </div>

                <div class="soils">
                <ul>
                  <li class="inline"><strong>This plant grows well in:</strong></li><li class="inline">                                
                    <mat-chip-list> 
                    <mat-chip style="margin-right:8px; background-color:aquamarine;" *ngFor="let soilType of soilTypes" [selectable]="selectable" (click)="showDialog(soilType)">  
                        {{soilType}}
                    </mat-chip>  
                  </mat-chip-list></li>
                </ul>
              </div>
            </div>
                <figure class="carousel">
                  <div class="crop shadow">
                  <input type="image" [src]="seedDetails.imagePreview" class="thumbnail" (click)="showDialog(image)"/>
                </div>
                  <small>Click to view full image</small>
                </figure>
          </div>

    <div class="flexBox social">
    <div class="buttons">
    <button mat-icon-button color="basic" aria-label="flag comment">
      <mat-icon aria-role="billing name">
          thumb_up</mat-icon>
    </button>
    <button mat-icon-button color="basic" aria-label="flag comment">
        <mat-icon aria-role="billing name">
            thumb_down</mat-icon>
      </button>
      <button mat-icon-button color="basic" aria-label="flag comment">
          <mat-icon aria-role="billing name">
              star</mat-icon>
        </button>
      </div>
    <div>
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-vk"></a>
      <a href="#" class="fa fa-linkedin"></a>
      <a href="#" class="fa fa-weibo"></a>
      <a href="#" class="fa fa-reddit"></a>
    </div>
    </div>
    <mat-divider></mat-divider>

CSS:

 .flexItem {
        max-width: 1100px;
    }


    .flexBox{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; 
    }

    ul.details{
        margin-left: 0px;
        padding-left: 0px;
        flex: 1 1 300px;
    }


      .inline{
          display: inline-block; 
         }

      .soils{

            align-items: flex-start;
      }

  .summary{
      display:flex;
      flex-direction:column;
      justify-content: flex-start;
      align-items: flex-start;
      /* justify-content: flex-start;
      text-align: left; */
      width:85%;
      /* align-items: flex-start; */
      /* border: solid grey 1; */
  }

    .carousel{
        width: 250px;
        height: 250px;
        /* overflow:hidden; */
        background-color: gray;
        flex: 1 1 250px;
        /* margin-left: 0px; */
    }

    .crop{
        width: 250px;
        height: 250px;
        overflow:hidden;
    }

    .shadow{
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
        border: 0.5px solid black;
    }

.test{
    width:850px;
    /* border: solid black; */
}


  .fa {
    /* padding: 40px; */
    border-right: 1px solid #E0E0E0;
    border-top: 1px solid #E0E0E0;
    height: 40px;
    width:40px;
    font-size: 24px;
    color:#B0B0B0;
    /* width: 50px; */
    text-align: center;
    vertical-align: bottom;
    /* align-items:center; */
    line-height: 1.6em;
    text-decoration: none;
    /* margin: 5px 2px; */
  }

  .fa:hover {
    color: #22B14C;
    }

    .social{
        width: 90%;
        justify-content: space-between;
    }

Answer 1

Just remove 90% width from the .social class

.flexItem {
  max-width: 1100px;
}

.flexBox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

ul.details {
  margin-left: 0px;
  padding-left: 0px;
  flex: 1 1 300px;
}

.inline {
  display: inline-block;
}

.soils {
  align-items: flex-start;
}

.summary {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* justify-content: flex-start;
      text-align: left; */
  width: 85%;
  /* align-items: flex-start; */
  /* border: solid grey 1; */
}


.shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
  border: 0.5px solid black;
}

.test {
  width: 850px;
  /* border: solid black; */
}

.fa {
  /* padding: 40px; */
  border-right: 1px solid #E0E0E0;
  border-top: 1px solid #E0E0E0;
  height: 40px;
  width: 40px;
  font-size: 24px;
  color: #B0B0B0;
  /* width: 50px; */
  text-align: center;
  vertical-align: bottom;
  /* align-items:center; */
  line-height: 1.6em;
  text-decoration: none;
  /* margin: 5px 2px; */
}

.fa:hover {
  color: #22B14C;
}

.social {
  justify-content: space-between;
}

<div class="flexBox social">
  <div class="buttons">
    <button mat-icon-button color="basic" aria-label="flag comment">
      <mat-icon aria-role="billing name">
          thumb_up</mat-icon>
    </button>
    <button mat-icon-button color="basic" aria-label="flag comment">
        <mat-icon aria-role="billing name">
            thumb_down</mat-icon>
      </button>
    <button mat-icon-button color="basic" aria-label="flag comment">
          <mat-icon aria-role="billing name">
              star</mat-icon>
        </button>
  </div>
  <div>
    <a href="#" class="fa fa-facebook">f</a>
    <a href="#" class="fa fa-twitter">t</a>
    <a href="#" class="fa fa-vk">v</a>
    <a href="#" class="fa fa-linkedin">li</a>
    <a href="#" class="fa fa-weibo">w</a>
    <a href="#" class="fa fa-reddit">r</a>
  </div>
</div>
<mat-divider></mat-divider>