CSS меняется хром, но работает идеально в Firefox

Question

я определил пользовательские CSS для моей страницы она отлично работает в Firefox, но списки накладываются друг на друга в хроме, я не могу получить, где я не прав в CSS

мой CSS код

@media not all and (-webkit-min-device-pixel-ratio:0) { 


    #agile-row{ 
overflow-x:auto; 
overflow-y:hidden; 
align-items: flex-start; 
display:flex; 

} 
#agile-board{ 
    margin-left:10px; 

} 
#i-box{ 
    width:300px; 
    height:500px; 
    overflow-y:auto; 

} 
} 
#agile-row{ 
overflow-x:auto; 
overflow-y:hidden; 
align-items: flex-start; 
display:flex; 

} 
#agile-board{ 
    margin-left:10px; 
} 
#i-box{ 
    width:300px; 
    height:500px; 
    overflow-y:auto; 
} 

мой HTML код

<div class="wrapper wrapper-content animated fadeInRight"> 
     <div class="row wrapper1 wrapper-content1"> 


        <?php 
         foreach($taskStatusModel as $taskstatus){ 
        ?> 
         <div class="agile-board" style="display:inline-block"> 
          <div class="ibox"> 
           <div class="ibox-items" > 
           <div class="ibox-content"> 

           <!--<div style="width:100%;text-align:right"><a href="index.php?r=pmt/project/project-kanban&id=<?=$model->id?>&delid=<?=$taskstatus->id?>" class="btn btn-xs btn-success" style="color:#fff;"><span class="glyphicon glyphicon-trash"></span></a></div>--> 
            <input type="hidden" class="status" value="<?= $taskstatus->id ?>"> 
            <h3><?=$taskstatus->label?> 

            <a href="index.php?r=pmt/project/project-kanban&id=<?=$model->id?>&delid=<?=$taskstatus->id?>" class="btn btn-xs btn-primary btn-circle pull-right"> <i class="fa fa-trash"></i> </a> 
            <a href="index.php?r=pmt/project/project-kanban&id=<?=$model->id?>&delid=<?=$taskstatus->id?>" class="btn btn-xs btn-info btn-circle pull-right"> <i class="fa fa-pencil"></i> </a> 

            </h3> 
            <p class="small"><i class="fa fa-hand-o-up"></i> Drag task between list</p> 

            <div class="input-group"> 

             <a href="javascript:void(0)" class="btn btn-warning btn-sm" onClick="opentaskpopup(this)"><i class="fa fa-edit"></i> <?=Yii::t('app', 'New Task')?></a> 
             <a href="javascript:void(0)" class="btn btn-danger btn-sm" onClick="opendefectpopup(this)"><i class="fa fa-bug"></i> <?=Yii::t('app', 'New Defect')?></a> 

            </div> 
            <ul class="sortable-list connectList agile-list"> 

             <?php 


             foreach(getTaskRecords($taskstatus->id) as $row){ 
             ?> 
             <li class="warning-element"> 
              <input type="hidden" class="id" value="<?=$row['id']?>" a href="index.php?r=pmt/task/task-view&id=<?=$row['id']?>" > 
              <input type="hidden" class="type" value="task"> 
              <a href="index.php?r=pmt/task/task-view&id=<?=$row['id']?>" style="word-wrap:break-word"> <?=$row['task_description']?></a> 
              <div class="agile-detail"> 
               <a href="index.php?r=pmt/task/task-view&id=<?=$row['id']?>" class="pull-right btn btn-xs btn-warning"><?=$row['task_id']?></a> 
               <i class="fa fa-clock-o"></i> <?=date('d-m-Y',$row['added_at']);?> 
              </div> 
             </li> 
             <?php 
              } 
             ?> 

            <!-- defect display begin--> 

             <?php 

             foreach(getDefectRecords($taskstatus->id) as $row){ 
             ?> 
             <li class="danger-element"> 
              <input type="hidden" class="id" value="<?=$row['id']?>" a href="index.php?r=pmt/defect/defect-view&id=<?=$row['id']?>" > 
              <input type="hidden" class="type" value="defect"> 
              <a href="index.php?r=pmt/defect/defect-view&id=<?=$row['id']?>" style="word-wrap:break-word"> <?=$row['defect_description']?></a> 
              <div class="agile-detail"> 
               <a href="index.php?r=pmt/defect/defect-view&id=<?=$row['id']?>" class="pull-right btn btn-xs btn-danger"><?=$row['defect_id']?></a> 
               <i class="fa fa-clock-o"></i> <?=date('d-m-Y',$row['added_at']);?> 
              </div> 
             </li> 
             <?php 
              } 
             ?> 
            </ul> 
           <!-- defect display end--> 
          </div> 
         </div> 
        </div><!-- needs action column ends --> 
         </div> 
        <?php 
         } 
        ?> 


     </div> <!-- div row ends --> 


    </div><!-- div wrapper ends --> 

Каждый раз, когда новый список добавляется строка должна автоматически добавить его в горизонтальной прокрутки DIV

Answer 1

вы должны удалить префикс из CSS