css flex not working

[mahfozmt]

in html not breaking ,

but dink pdf generated like this

my CSS code is @page {
size: 8.7in 11.56in;
margin-left: 1in;
margin-right: 1in;
margin-top: 0.8in;
margin-bottom: 0.5in;
line-height: 8px;
}

label {
font-size: 20;
}

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: wrap;
}

#left {
width: 50%;
float: left;
display: flex;
}

#right {
width: 50%;
float: right;
display: flex;
}

table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
text-align: center;
}

table.Center {
    margin-left: auto;
    margin-right: auto;
}

@media print {
button {
display: none !important;
}

input,
textarea {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

}

button {
display: none !important;
}

input,
textarea {
border: none !important;
box-shadow: none !important;
outline: none !important;
}

/* -------- */
div {
/background: rgba(255, 255, 0, 0.1);/
border: 2px rgba(0, 0, 0, 0.5);
}

#gridBox2 {
display: flex;
justify-content: stretch;
width: 285px;
height: 184px;
}

.top-right-table {
border: 2px solid black;
border-radius: 10px;
}

.top-right-table-body {
display: table;
width: 16.5rem;
margin-left: 0.5rem;
}

.top-right-table-data {
text-align: left;
}

.top-right-table-row,
.top-right-table-data {
border: none;
}

.top-right-table-data label {
    font-size: 18;
    display: inline-block;
}

.main-title {
text-align: center;
border: none;
image-orientation: top;
}

.main-title-1 {
margin-bottom: 2rem;
}

h2.main-title.top-title {
padding-top: 1rem;
}

.top-title {
font-size: 30;
}

.building-details-form {
display: flex;
justify-content: flex-end;
}

.top-center-table-container {
display: flex;
justify-content: center;
}

.top-center-table td,
tr {
border: none;
}

.top-center-table {
border: none;
}

.top-center-table tbody td {
    text-align: left !important;
}

.top-left-picture {
border: 2px solid black;
height: 180px;
width: 160px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 18;
border-radius: 10px;
}

.underlined-input-container {
border-bottom: 2px solid black;
border-bottom-style: dotted;
}

.main-form-element {
display: flex;
margin-top: 5px;
margin-bottom: 5px;
}

.main-form-element .underlined-input-container {
    width: 68%;
}

    .main-form-element .underlined-input-container input {
        width: 100%;
    }

.main-form-element #right .underlined-input-container {
    width: 65%;
}

.full-name-input-container {
flex: 1 !important;
}

.father-name-input-container {
flex: 1 !important;
border-bottom: none;
}

.birth-date-input-container {
flex: 1 !important;
}

.marital-status-input-container {
flex: 1 !important;
}

.permanent-address-container {
display: flex;
flex-direction: column;
}

.upper-form-element {
display: flex;
flex-direction: row;
}

.lower-form-element {
display: flex;
flex: 1 !important;
margin-left: 6.5rem;
margin-top: 0.5rem;
}

.full-width-input-container {
flex: 1 !important;
}

.current-address-input-container {
flex: 1 !important;
}

.work-address-input-container {
flex: 1 !important;
}

.religion-input-container {
flex: 1 !important;
}

.educational-qualification-input-container {
flex: 1 !important;
}

.other-contacts-input-container {
flex: 1 !important;
}

.contact-number-2-input-container {
flex: 1 !important;
}

.contact-number-3-input-container {
flex: 1 !important;
}

.email-id-input-container {
flex: 1 !important;
}

.national-id-input-container {
flex: 1 !important;
}

.passport-number-input-container {
flex: 1 !important;
}

.contact-name-input-container {
flex: 1 !important;
}

.contact-relation-input-container {
flex: 1 !important;
}

.contact-address-input-container {
flex: 1 !important;
}

.contact-number-input-container {
flex: 1 !important;
}

.top-right-underlined-input-container {
border-bottom: 2px solid black;
border-bottom-style: dotted;
flex: 1 !important;
}

.top-right-input {
width: 100%;
}

.spouse-contact-input-container {
flex: 1 !important;
}

.national-id-2-input-container {
flex: 1 !important;
}

.spouse-address-input-container {
flex: 1 !important;
}

.driver-name-input-container {
flex: 1 !important;
}

.driver-address-input-container {
flex: 1 !important;
}

.previous-owner-input-container {
flex: 1 !important;
}

.previous-owner-contact-input-container {
flex: 1 !important;
}

.left-margin-1 {
margin-left: 2.2rem;
}

.previous-owner-address-input-container {
flex: 1 !important;
}

.reason-for-move-input-container {
flex: 1 !important;
}

.current-owner-input-container {
flex: 1 !important;
}

.current-owner-contact-input-container {
flex: 1 !important;
}

.date-of-move-input-container {
flex: 1 !important;
}

.bottom-form-container {
margin-top: 2rem;
justify-content: space-between;
}

.bottom-form-element-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

#left.bottom-form-element-container {
align-items: flex-start;
}

#right.bottom-form-element-container {
align-items: flex-end;
}

.form-submission-date-input-container {
width: 100% !important;
}

.blank-spacer {
width: 90rem;
}

.signature-input-container {
width: 100% !important;
}

.center-label {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.logo-table,
.logo-table th {
border: none;
}

.logo-table-container {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14;
}

.contacts-table-serial-number {
size: 10;
}

.no-wrap {
white-space: nowrap;
padding: 3px;
}

• {
  font-family: "Bangla", sans-serif;
  }
  /* -------- */

[zanyar3]

+1

I have same problem,
any update?

[Jackson-Antunes-Sampaio]

+1

I have same problem,
any update?

[schmidom]

+1

I have same problem,
any update?
any workarounds?

[raashiqyusufkk]

@schmidom Kindly refer this link wkhtmltopdf/wkhtmltopdf#1522

[kimcuongden1712]

using display: table for the parent element
after using display: table-cell for child element