With html2pdf in generated pdf as all css styles are lost

In my laravel 5.7 / bootstrap 4.4 app I use spatie/browsershot 3.37 and spipu/html2pdf 5.2 to generate pdf file and for my generated pdf file want I set layout with 100% height and footer and header like here: https://jsfiddle.net/MadLittleMods/LmYay/

But imported block of code which looks ok on my blade page in browser is invalid in generated pdf : as all css styles are lost.

by clicking on “To pdf file” content of the page is rendered into pdf file:

Browsershot::html(htmlspecialchars_decode($pdf_content))
           ->showBackground()
           ->save($save_to_file);

if($hidden_action== 'upload') {
    \Response::download($save_to_file, $filename_to_save, array('Content-Type: application/octet-stream', 'Content-Length: pdf'));
    return response()->download($save_to_file, $filename_to_save)->deleteFileAfterSend(true);
}

in my blade file:

@extends($current_admin_template.'.layouts.backend')


@section('content')

    @inject('viewFuncs', 'App\library\viewFuncs')

    <div id="page-wrapper" class="card">


  // THIS PART LOOKS OK IN BROWSER BUT IN GENERATED PDF INVALID AS ALL CSS CLASSES ARE LOST
        <div class="flexbox-parent" id="div_invoice_content" style="display: flex;">
            <input type="hidden" id="hidden_invoice_no" name="hidden_invoice_no" value="">
            <input type="hidden" id="hidden_invoice_id" name="hidden_invoice_id" value="">

            <div class="flexbox-item header">
                Header $invoice_no::<br>
                $invoice_id::
            </div>

            <div class="flexbox-item fill-area content flexbox-item-grow">
                <div class="fill-area-content flexbox-item-grow">
                    Content
                    <br /><br />
                    Emulates height 100% with a horizontal flexbox with stretch
                    <br /><br />
                    This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
                </div>
            </div>

            <div class="flexbox-item footer">
                Footer
            </div>
        </div>


        <form method="POST" action="" accept-charset="UTF-8" id="form_print_to_pdf_content"
              name="form_print_to_pdf_content"
              enctype="multipart/form-data">
            {!! csrf_field() !!}

            <div class="form-row m-3">
            ...
            FORM CONTENT
            ...
            

            </div>
        </section> <!-- class="card-body" -->

    </div>
    <!-- /.page-wrapper page Content : invoice edit -->


@endsection





    <style  lang="css">
        .flexbox-parent
        {
            height: 842pt !important;
            width: 595pt !important;

            display: flex;
            flex-direction: column;

            justify-content: flex-start; /* align items in Main Axis */
            align-items: stretch; /* align items in Cross Axis */
            align-content: stretch; /* Extra space in Cross Axis */

            background: rgba(255, 255, 255, .1);
        }

        .flexbox-item
        {
            padding: 8px;
        }
        .flexbox-item-grow
        {
            flex: 1; /* same as flex: 1 1 auto; */
        }

        .flexbox-item.header
        {
            background: rgba(255, 0, 0, .1);
        }
        .flexbox-item.footer
        {
            background: rgba(0, 255, 0, .1);
        }
        .flexbox-item.content
        {
            background: rgba(0, 0, 255, .1);
        }

        .fill-area
        {
            display: flex;
            flex-direction: row;

            justify-content: flex-start; /* align items in Main Axis */
            align-items: stretch; /* align items in Cross Axis */
            align-content: stretch; /* Extra space in Cross Axis */

        }
        .fill-area-content
        {
            background: rgba(0, 0, 0, .3);
            border: 1px solid #000000;

            /* Needed for when the area gets squished too far and there is content that can't be displayed */
            overflow: auto;
        }
    </style>







@section('scripts')


    <link rel="stylesheet" href="" type="text/css">

    <script src=""></script>
    ...

@endsection

        

I tried to put <style block in several places of the page, but in all cases in generated pdf as all css styles are lost

Which is valid way to use css classes in the generated file?

Thanks!

via Chebli Mohamed