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

[Anonymous]

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

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

вот мой html-код

Код: Выделить всё

   * {
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;
}

Код: Выделить всё

[b]Invoice no[/b]
[b]Invoice Date[/b]
[b]Payment Terms[/b]
[b]Due date[/b]
[b]Broker name[/b]

[b]:SREI2425-01871[/b]
:07-Jun-2024
:90 days
[b]:06-Sep-2024[/b]
:Direct







[b]Branch[/b]

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


[b]Place of Supply:[/b]

Dadra and Nagar Haveli and Daman and Diu







[b]Branch Ref:[/b]

1

[b]No of Parcel:[/b]

8









[b]Buyer:
 B.K.  Enterprises (Delhi)

Address:[/b]

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



[b]State:[/b] Delhi
[b]State code:[/b] 07
[b]Phone no :[/b] 9311142406

[b]PAN:[/b] ABFPN3214M
[b]GST No:[/b] 07ABFPN3214M1ZM









[img]https://cdn.britannica.com/17/155017-050-9AC96FC8/Example-QR-code.jpg[/img]
                    alt=""
/>



[img]https://cdn.britannica.com/17/155017-050-9AC96FC8/Example-QR-code.jpg[/img]
                  alt=""
/>

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