Grid is not working inside -moz-box div in firefox

[Duna]

 Grid is not working inside -moz-box div in firefox, in chrome is working great. My code is:


 <div class="header flexbox" onclick= "HeaderClick('@Url.Content("~/")')">
  <div id="myGrid" ></div>
      <div id="leftlogo">
      </div>
      <div id="middlelogo">
      </div>
      <div id="rightlogo">
      </div>
   </div>


<script>
          $("#myGrid").kendoGrid({
              pageable: true,
              autoBind: false,
              groupable: true,
              selectable: true,
              sortable: true,
              columns: [
               { title: "ID", field: "ID" },
               { title: "Description", field: "Description" },
               { title: "Created By", field: "CreatedBy" },
               { title: "Creation Date", field: "CreationDate" }
            ]
          }); 
</script>

As i saw the width and height percentages cannot be controlled in firefox when flexbox is present. As you see i have the grid inside of flexbox. And the width should ocuppy the entire content of the component that you put in(this is done by design to have width:100%). Is this a way/trick to have kendogrid look as in chrome? See attached picture for details