title: Dompdf not generating pdf properly
body: <p>Below is my screenshots of html and pdf
  <a href="https://i.stack.imgur.com/n756j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n756j.png" alt="html screenshot"></a></p>
  
  <p><a href="https://i.stack.imgur.com/RtRsO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RtRsO.png" alt="pdf screenshot"></a></p>
  
  <p>my html contains divs and styles like below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Challan Form&lt;/title&gt;
  &lt;style&gt;
   body{
    background: #f2f2f2;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serifl;
    font-size:14px;
   }
   *{
    margin:0;
    padding:0;
    box-sizing:border-box;
   }
   .form-challan {
      width: 96%;
      margin: 0px auto;
      background: #ccc;
   padding:20px 0;
   min-height: 500px;
  }
  ul{
   list-style: none;
  }
  
  a{
   text-decoration:none;
  }
  
  .form-challan ul.main{
   display:flex;
   justify-content: space-between;
  }
  
  .form-challan ul.main li#triplicate,
  .form-challan ul.main li#duplicate,
  .form-challan ul.main li#original {
      width: 32.33%;
      background: #fff;
      min-height: 400px;
   border: 2px solid;
   padding:5px 0;
  }
  
  .form-challan ul li:after{
   border-right: 1px dotted #000;
  }
  
  .rows {
      width: 100%;
      float: left;
  }
  
  .rows-tri{
   width:96%;
  }
  .f-right{
   float:right;
  }
  .f-left{
   float:left;
  }
  .t-right{
   text-align: right;
  }
  .t-left{
   text-align:left;
  }
  .t-center{
   text-align:center;
  }
  .gov-telangana{
   font-weight:bold;
   font-size:16px;
   margin:0 0 5px 0;
  }
  
  input[type="text"] {
      padding: 2px;
      float: left;
      width: 10%;
      text-align: center;
      border: 1px solid #000;
  }
  
  .rows-tri.f-right ul{
   display:block;
  }
  .rows-tri.f-right ul li{
   width:auto;
   border:none;
   min-height:inherit;
   padding:0;
  }
  .e-cls{
      float: left;
      margin: 0 0 0 5px;
  }
  
  .cha-tre-num {
      width: 98%;
      float: right;
   padding: 5px 0;
  }
  
  .cha-tre-num .challan-no {
      width: 56%;
      margin-left: 10px;
  }
  
  .hr-full{
   width:100%;
   border-bottom:2px solid #333;
   float:left;
  }
  
  .major-head {
      padding: 3px 0;
  }
  .pa3{
   padding:3px 0;
  }
  .wid-mar{
   width:98%;
   margin:0px auto;
      display: table;
  }
  
  .major-head.wid-mar ul li input {
      width: 25%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="form-challan"&gt;
   &lt;ul class="main"&gt;
       &lt;li id="triplicate"&gt;
           &lt;div class="rows"&gt;
                  &lt;div class="rows-tri f-left t-right"&gt;
                  &lt;span class="e-cls"&gt;E&lt;/span&gt;
                      &lt;span class="tri-title"&gt;TRIPLICATE&lt;/span&gt;
                  &lt;/div&gt;
     &lt;/div&gt;
              &lt;div class="rows t-center"&gt;
                  &lt;p class="gov-telangana"&gt;GOVERNMENT OF TELANGANA&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="rows"&gt;
               &lt;div class="rows-tri f-right"&gt;
       &lt;ul class="f-left"&gt;
        &lt;li style="width:20%; float:left;"&gt;&lt;span&gt;DTO/STO&lt;/span&gt;&lt;/li&gt;                  
                          &lt;li style="width:25%; float:left;"&gt;&lt;span&gt;HYD&lt;/span&gt;&lt;/li&gt;
                          &lt;li style="width:54%; float:left;"&gt;
                              &lt;span class="f-left"&gt;Treaury/PAO Code&lt;/span&gt;
                              &lt;input type="text" placeholder="2" /&gt;
                              &lt;input type="text" placeholder="5" /&gt;
                              &lt;input type="text" placeholder="0" /&gt;
                              &lt;input type="text" placeholder="2" /&gt;
        &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="rows"&gt;
               &lt;div class="cha-tre-num"&gt;
                   &lt;span class="f-left"&gt;Treasury Challan No.&lt;/span&gt;
                      &lt;input type="text" class="challan-no f-left"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="hr-full"&gt;&lt;/div&gt;
              &lt;div class="rows"&gt;
               &lt;div class="major-head wid-mar"&gt;
                   &lt;ul class="f-left"&gt;
        &lt;li style="width:30%; float:left;"&gt;&lt;span&gt;Major Head&lt;/span&gt;&lt;/li&gt;                  
                          &lt;li style="width:25%; float:left;"&gt;
                              &lt;input type="text" placeholder="2" /&gt;
                              &lt;input type="text" placeholder="5" /&gt;
                              &lt;input type="text" placeholder="0" /&gt;
                              &lt;input type="text" placeholder="2" /&gt;
        &lt;/li&gt;
                          &lt;li style="width:35%; float:right;"&gt;&lt;span&gt;Other Deposits&lt;/span&gt;&lt;/li&gt;
                          
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="hr-full"&gt;&lt;/div&gt;
              
              &lt;div class="rows"&gt;
               &lt;div class="sub-major-head wid-mar pa3"&gt;
                   &lt;ul class="f-left"&gt;
        &lt;li style="width:30%; float:left;"&gt;&lt;span&gt;Sub - Major Head&lt;/span&gt;&lt;/li&gt;                  
                          &lt;li style="width:25%; float:left;"&gt;
                              &lt;input type="text" placeholder="2" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="5" style="width:25%;" /&gt;
        &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="hr-full"&gt;&lt;/div&gt;
              
              &lt;div class="rows"&gt;
               &lt;div class="minor-head wid-mar pa3"&gt;
                   &lt;ul class="f-left"&gt;
        &lt;li style="width:30%; float:left; margin-top: 5px;"&gt;&lt;span&gt;Minor Head&lt;/span&gt;&lt;/li&gt;                  
                          &lt;li style="width:25%; float:left; margin-top: 5px;"&gt;
                              &lt;input type="text" placeholder="2" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="5" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="5" style="width:25%;" /&gt;
        &lt;/li&gt;
                          &lt;li style="width:40%; float:left; font-size:12px;"&gt;&lt;span&gt;Defined Contributory Pension Scheme For Govt. Employess&lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="hr-full"&gt;&lt;/div&gt;
              
              &lt;div class="rows"&gt;
               &lt;div class="group-sub-head wid-mar pa3"&gt;
                   &lt;ul class="f-left"&gt;
        &lt;li style="width:30%; float:left;"&gt;&lt;span&gt;Group Sub - Head&lt;/span&gt;&lt;/li&gt;                  
                          &lt;li style="width:25%; float:left;"&gt;
                              &lt;input type="text" placeholder="2" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="5" style="width:25%;" /&gt;
        &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="hr-full"&gt;&lt;/div&gt;
              
              &lt;div class="rows"&gt;
               &lt;div class="sub1-head wid-mar pa3"&gt;
                   &lt;ul class="f-left"&gt;
        &lt;li style="width:30%; float:left; margin-top: 5px;"&gt;&lt;span&gt;Sub - Head&lt;/span&gt;&lt;/li&gt;                  
                          &lt;li style="width:25%; float:left; margin-top: 5px;"&gt;
                              &lt;input type="text" placeholder="2" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="5" style="width:25%;" /&gt;
        &lt;/li&gt;
                          &lt;li style="width:40%; float:left; font-size:12px;"&gt;&lt;span&gt;AP State Govt EMployees Contributory Pension Scheme&lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="rows"&gt;
               &lt;div class="detailed1-head wid-mar pa3"&gt;
                   &lt;ul class="f-left"&gt;
        &lt;li style="width:30%; float:left;"&gt;&lt;span&gt;Detailed - Head&lt;/span&gt;&lt;/li&gt;                  
                          &lt;li style="width:25%; float:left;"&gt;
                              &lt;input type="text" placeholder="2" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="5" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="5" style="width:25%;" /&gt;
        &lt;/li&gt;
                          &lt;li style="width:40%; float:left; font-size:12px;"&gt;&lt;span&gt;Employee Contribution&lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="hr-full"&gt;&lt;/div&gt;
              
              &lt;div class="rows"&gt;
               &lt;div class="sub-detailed wid-mar pa3"&gt;
                   &lt;ul class="f-left"&gt;
        &lt;li style="width:30%; float:left;"&gt;&lt;span&gt;Sub - Detailed&lt;/span&gt;&lt;/li&gt;                  
                          &lt;li style="width:25%; float:left;"&gt;
                              &lt;input type="text" placeholder="0" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="0" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="0" style="width:25%;" /&gt;
        &lt;/li&gt;
                          &lt;li style="width:40%; float:left; font-size: 14px; text-align: center;"&gt;&lt;span&gt;---&lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="hr-full"&gt;&lt;/div&gt;
              
              &lt;div class="rows"&gt;
               &lt;div class="sub-detailed wid-mar pa3"&gt;
                   &lt;ul class="f-left" style="font-size:12px;"&gt;
        &lt;li style="width:20%; float:left;"&gt;&lt;span&gt;Non-Plan =N Plan=P&lt;/span&gt;&lt;/li&gt;                  
                          &lt;li style="width:22%; float:left; margin-right: 10px;"&gt;
                              &lt;input type="text" placeholder="N" style="width:25%;" /&gt;
                              Charged = C Voted =V
        &lt;/li&gt;
                          &lt;li style="width:22%; float:left;"&gt;
                              &lt;input type="text" placeholder="V" style="width:25%;" /&gt;
                              Charged = C Voted =V
        &lt;/li&gt;
                          &lt;li style="width:25%; float:left;"&gt;
                              &lt;input type="text" placeholder="2" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="0" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="7" style="width:25%;" /&gt;
                              &lt;input type="text" placeholder="1" style="width:25%;" /&gt;
        &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="hr-full"&gt;&lt;/div&gt;
              
              &lt;div class="rows"&gt;
               &lt;div class="amount-box"&gt;
                   &lt;div class="wid-mar pa3"&gt;
                       
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;            
              
              
          &lt;/li&gt;
          &lt;li id="duplicate"&gt;&lt;/li&gt;
          &lt;li id="original"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;a class="hideforpdf" href="converted2.php?action=download" target="_blank"&gt;View PDF&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>PHP code</p>
  
  <pre><code>&lt;?php
  require_once 'dompdf/autoload.inc.php';
  
  // reference the Dompdf namespace
  use Dompdf\Dompdf;
  
  if (isset($_GET['action']) &amp;&amp; $_GET['action'] == 'download') {
  
  // instantiate and use the dompdf class
  $dompdf = new Dompdf();
  
  //to put other html file
  $html = file_get_contents('challan-form.html');
  
  //hide download pdf link in generated output pdf
  $html .= '&lt;style type="text/css"&gt;.hideforpdf { display: none; }&lt;/style&gt;';
  
   //load html
   $dompdf-&gt;loadHtml($html);
  
  // (Optional) Setup the paper size and orientation
  $dompdf-&gt;setPaper('Legal', 'Landscape');
  
  // Render the HTML as PDF
   $dompdf-&gt;render();
  
  // Output the generated PDF (1 = download and 0 = preview)
    $dompdf-&gt;stream("sample",array("Attachment"=&gt;1));
  }
  ?&gt;
  </code></pre>
  
  <p>There will be three boxes in html.
  What is the mistake here? Does dompdf doesnot support all styles? there is a css code saying display:flex, pdf is generating empty if it is there. If I remove that line attached pdf is generated. Please help</p>