hauteur CSS ne fonctionne pas

Question

Je possède ce code CSS:

.dashboard_wrap { 
    display:table; 
    min-width:100%; 
    height:10px; 
} 
.dashboard_items { 
    display:table-row; 
    height:10px; 
} 
.dashboard_items div{ 
    display:table-cell; 
    border:1px solid #F36F25; 
    padding:10px; 
    height:10px; 
    overflow-y:scroll; 
} 
@media all and (max-width: 1300px) { 
    div.dashboard_items div { 
     width: 100%; 
     display:block; 
    } 
} 

mais la hauteur ne fonctionne pas

jsFiddle ici: http://jsfiddle.net/rN6fu/

Answer 1

Je pense que vous voulez que la hauteur de la 'ligne' soit fixée à quelque chose comme 10px et que les éléments de chaque cellule soient défilables. Vous ne pouvez pas le faire avec des tables HTML et vous ne pouvez pas le faire avec des éléments définis sur display: table-cell.

Flotteurs à la rescousse:

.dashboard_items div { 
    box-sizing: border-box; /* keep the borders from breaking 100% */ 
    border:1px solid #236FF5; 
    display: block; 
    float: left; 
    padding: 10px; 
    height: 10px; 
    overflow-y:scroll; 
} 

Dans ce FIDDLE je régler la hauteur de 40 pour que vous puissiez voir plus facilement le défilement. Même à 10px, vous pouvez utiliser la molette de la souris ou l'équivalent pour faire défiler. Vous pouvez également placer un autre élément à l'intérieur de div .dashboard_items et définir cet élément sur display: block et overflow-y: scroll.

Answer 2

Votre height fonctionne. Il suffit de supprimer et cela fonctionnera.

DEMO

.dashboard_items div{ 
    display:table-cell; 
    border:1px solid #F36F25; 
    height:10px; 
    overflow-y:scroll; 
} 

DEMO2

.dashboard_items div{ 
    display:table-cell; 
    border:1px solid #F36F25; 
    height:18px; 
    padding:0px 10px 0px 10px; 
    overflow-y:scroll; 
} 

EDIT 2

DEMO3

.dashboard_items div{ 
    display:table-cell; 
    border:1px solid #F36F25; 
    height:auto; 
    padding:0px 10px 0px 10px; 
    overflow-y:scroll; 
}