Почему контент сжимается после добавления гибкого дисплея ⇐ CSS

[Anonymous]

хочу добиться этого, но получаю усадку каждый раз после добавления гибкого дисплея, если я удалю свойство flex, тогда оно будет работать правильно, я также пробовал flex-shrink, но у меня это не сработало
[img]https:/ /i.sstatic.net/yiNMM0w0.png[/img]

Я использую flex-box для этого макета, пожалуйста, помогите мне правильно реализовать этот дизайн, и одно условие: я Я тоже пробовал таблицу, но она не сработала, поскольку она увеличивалась и уменьшалась в зависимости от данных, и я делаю счет фиксированной ширины

вот мой html-код









Invoice no
Invoice Date
Payment Terms
Due date
Broker name

:SREI2425-01871
:07-Jun-2024
:90 days
:06-Sep-2024
:Direct







Branch

Ginza Industries Limited (KDC) Ginza Industries
Limited (KDC)


Place of Supply:

Dadra and Nagar Haveli and Daman and Diu







Branch Ref:

1

No of Parcel:

8









Buyer:
B.K. Enterprises (Delhi)

Address:

2009, 1st Floor,, Kinari Bazar, Delhi., New Delhi- 110006



State: Delhi
State code: 07
Phone no : 9311142406

PAN: ABFPN3214M
GST No: 07ABFPN3214M1ZM










alt=""
/>




alt=""
/>







вот CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

@page {
size: A4;
margin: 0.8cm;
border: 1px solid #000;
@bottom-right {
content: counter(page) " / " counter(pages);
font-size: 10px;
color: black;
}
}

html,
body {
height: 100%;
width: 100%;
}

.big {
font-size: 14px;
}

.section-2 {
width: 100%;
border-bottom: 1px solid #000;
min-height: 15%;
}

p {
font-size: 10px;
}

.section-2-body {
width: 100%;
height: 100%;
}

.content-wrapper {
display: flex;
width: 100%;
height: 100%;
}

.upper-left-content {
width: 65%;
}

.upper-left-content-wrapper {
display: flex;
width: 100%;
}

.invoice-container {
width: 55%;
border-right: 1px solid black;
}

.invoice-wrapper {
display: flex;
width: 100%;
align-items: baseline;
line-height: 1.7;
}

.invoice-wrapper .invoice-title {
white-space: nowrap;
}

.invoice-wrapper .invoice-value {
margin-left: 10px;
}

.branch-section {
width: 25%;
border-right: 1px solid black;
text-align: center;
}

.branch-ref-section {
width: 20%;
border-right: 1px solid black;
text-align: center;
}

.branch-section-wrapper,
.branch-ref-wrapper {
width: 100%;
}

.branch,
.branch-ref {
min-height: 70px;
border-bottom: 1px solid black;
}

.pos,
.nop {
min-height: 30px;
}

.lower-left-content {
width: 65%;
}

.lower-left-content-wrapper {
width: 100%;
border-top: 1px solid black;
border-right: 1px solid black;
}

.lower-left-content-wrapper .buyer {
padding: 4px;
line-height: 1.5;
}

.state-info,
.pan-info {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

.upper-right-content {
width: 35%;
}

.upper-right-content-wrapper {
display: flex;
width: 100%;
}

.upper-right-content-wrapper .right-side-qr-code {
width: 55%;
}

.upper-right-content-wrapper .left-side-qr-code {
width: 45%;
}

.upper-right-content-wrapper .qr-code img,
.upper-right-content-wrapper .left-side-qr-code img {
width: 60px;
height: 60px;
}

div,
section,
p {
word-break: break-all;
}


Подробнее здесь: https://stackoverflow.com/questions/786 ... splay-flex