Dompdf not generating pdf properly
<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>