conteneurs enfants même largeur que parent

Question

I créé la grille suivante: https://codepen.io/anon/pen/mBwqQP

Le problème est que les rangées avec les données couvrent uniquement dans la mesure où la largeur de l'écran. En outre, si vous inspectez la ligne d'en-tête, la ligne réelle ne correspond pas à la largeur du conteneur.

Est-il possible d'avoir la même largeur que le conteneur dans lequel ils se trouvent?

.schedule-grid { 
 
    width: 100%; 
 
} 
 

 
.schedule-grid .rows { 
 
    width: calc(100% - 150px); 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
    margin-left: 150px; 
 
} 
 

 
.schedule-grid .rows .header-row { 
 
    margin: 0; 
 
    height: auto; 
 
} 
 

 
.schedule-grid .rows .header-row>div { 
 
    width: 250px; 
 
    display: inline-block; 
 
    white-space: normal; 
 
} 
 

 
.schedule-grid .rows .fixed { 
 
    width: 150px !important; 
 
    position: absolute; 
 
    left: 0px; 
 
} 
 

 
.schedule-grid .rows .row { 
 
    margin: 0; 
 
    background-color: red; 
 
} 
 

 
.schedule-grid .rows .row>div { 
 
    font-size: 12px; 
 
    padding: 5px; 
 
    height: 25px; 
 
    background-color: red; 
 
}

<div class="schedule-grid"> 
 
    <div class="rows"> 
 
    <div class="header-row"> 
 
     <div class="fixed">Name/Date</div> 
 
     <div> 
 
     Fr 1 Sep 
 
     </div> 
 
     <div> 
 
     Sa 2 Sep 
 
     </div> 
 
     <div> 
 
     Su 3 Sep 
 
     </div> 
 
     <div> 
 
     Mo 4 Sep 
 
     </div> 
 
     <div> 
 
     Tu 5 Sep 
 
     </div> 
 
     <div> 
 
     We 6 Sep 
 
     </div> 
 
     <div> 
 
     Th 7 Sep 
 
     </div> 
 
     <div> 
 
     Fr 8 Sep 
 
     </div> 
 
     <div> 
 
     Sa 9 Sep 
 
     </div> 
 
     <div> 
 
     Su 10 Sep 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="fixed "> 
 
     Name 
 
     </div> 
 
     <div> 
 
     Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Si vous pouvez modifier votre balisage, puis créez une nouvelle enveloppe pour autour de la .rows div et appliquer le style actuellement donné à .rows:

.schedule-grid > div { 
    width: calc(100% - 150px); 
    overflow: auto; 
    white-space: nowrap; 
    margin-left: 150px; 
} 

Maintenant, pour la .rows vous pouvez appliquer display: inline-block

.schedule-grid .rows { 
    display: inline-block; 
} 

Voir la démo ci-dessous:

.schedule-grid { 
 
    width: 100%; 
 
} 
 
/* 
 
.schedule-grid .rows { 
 
    width: calc(100% - 150px); 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
    margin-left: 150px; 
 
} 
 
*/ 
 
.schedule-grid > div { 
 
    width: calc(100% - 150px); 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
    margin-left: 150px; 
 
} 
 
.schedule-grid .rows { 
 
    display: inline-block; 
 
} 
 
.schedule-grid .rows .header-row { 
 
    margin: 0; 
 
    height: auto; 
 
} 
 
.schedule-grid .rows .header-row > div { 
 
    width: 250px; 
 
    display: inline-block; 
 
    white-space: normal; 
 
} 
 
.schedule-grid .rows .fixed { 
 
    width: 150px !important; 
 
    position: absolute; 
 
    left: 0px; 
 
} 
 
.schedule-grid .rows .row { 
 
    margin: 0; 
 
    background-color: red; 
 
} 
 
.schedule-grid .rows .row > div { 
 
    font-size: 12px; 
 
    padding: 5px; 
 
    height: 25px; 
 
    background-color: red; 
 
}

<div class="schedule-grid"> 
 
    <div> 
 
    <div class="rows"> 
 
     <div class="header-row"> 
 
     <div class="fixed">Name/Date</div> 
 
     <div> 
 
      Fr 1 Sep 
 
     </div> 
 
     <div> 
 
      Sa 2 Sep 
 
     </div> 
 
     <div> 
 
      Su 3 Sep 
 
     </div> 
 
     <div> 
 
      Mo 4 Sep 
 
     </div> 
 
     <div> 
 
      Tu 5 Sep 
 
     </div> 
 
     <div> 
 
      We 6 Sep 
 
     </div> 
 
     <div> 
 
      Th 7 Sep 
 
     </div> 
 
     <div> 
 
      Fr 8 Sep 
 
     </div> 
 
     <div> 
 
      Sa 9 Sep 
 
     </div> 
 
     <div> 
 
      Su 10 Sep 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="fixed "> 
 
      Name 
 
     </div> 
 
     <div> 
 
      Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>