无法将第二个flexbox列向左对齐

Question

我的问题是：我有一个flexbox，它可以将摘要部分和图像部分放在一行中。摘要部分是一个嵌套的flexbox，将3个列表显示为第一列，将水平土壤类型列表显示为第二列。问题是第二列的内容位于中间，而我希望它与上面的列表列在同一开始位置处向左对齐。这是当前情况的图片：

我尝试使用justify-content: flex-start，align-items: flex-start，margin-left: 0px; margin-right: auto;和margin-left:-500px，但是每次第二列都固定在中间。谁能告诉我该怎么做才能将第二列的内容移到右边？谢谢

代码如下：

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>

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; */
}