How can I stop the text from reflowing in the back card? Text justification changes when answering cloze

Card Design
1

When I show the answer on my card, the text usually reflows, and justify itself in a slightly different way.

I could understand this happening only on the cloze line, since it changes to show the full line of answer, but even the first paragraph changes, Why the list number 1 reflows?

front
front1246×1334 122 KB

back
back1246×1334 241 KB

My Card:

Front

{{#Preamble}}{{Preamble}}

{{/Preamble}}
{{cloze:Text1}}
{{cloze:Text2}}
{{cloze:Text3}}
{{cloze:Text4}}
{{cloze:Text5}}
{{cloze:Text6}}
{{cloze:Text7}}
{{cloze:Text8}}
{{cloze:Text9}}

Back

{{#Preamble}}{{Preamble}}

{{/Preamble}}
{{cloze:Text1}}
{{cloze:Text2}}
{{cloze:Text3}}
{{cloze:Text4}}
{{cloze:Text5}}
{{cloze:Text6}}
{{cloze:Text7}}
{{cloze:Text8}}
{{cloze:Text9}}


{{#Mnemonic}}

Mnemonic:
{{Mnemonic}}

{{/Mnemonic}}

{{#Extra}}

{{Extra}}
{{/Extra}}

{{#Image}}

{{Image}}
{{/Image}}

{{#Source}}

Fonte: {{Source}}
{{/Source}}

{{#Tags}}

Tags: {{Tags}}
{{/Tags}}
{{Metanote}}

CSS:

.mac {
margin-top: 3em;
margin-left: 5em;
margin-right: 5em;
}

.ipad {
margin-top: 3em;
margin-left: 5em;
margin-right: 5em;
}

.card {
font-family: avenir next;
font-size: 20px;
text-align: left;
margin-left: 1em;
margin-right: 1em;
color: #586e75;
background-color: #fdf6e3;
}

.cloze {
font-weight: bold;
color: #268bd2;
}

#Extra {
font-size: 16px;
color: #657b83
}

#Tags {
font-size: 14px;
color: #93a1a1
}

#Source {
font-size: 14px;
color: #93a1a1
}

#Mnemonic {
font-size: 14px;
color: #2aa198
}

#Image {
font-size: 14px;
color: #657b83
}

#Red-small {
font-size: 12px;
color: red
}

ul, ol {
text-align:left;
display: block;
margin-left: 1em;
margin-top: 0.2em;
margin-bottom: 0.2em;
}

2

If the text has non-breaking spaces, perhaps it’s causing the width of the text area to change.

3

Thanks for answering,

I just solved it by chance:
It depends on a MacOS system setting about scrolling bars, if they are set to always show, as soon as the answer is shown on the card, the card becomes too long for the window and the scrolling bar appears.
The bar occupies a little bit of space and the whole card reflows to accomodate this.

Setting the bar to only show when scrolling or automatically removes the annoying reflow.

4

Interesting, thanks for taking the time to post the solution.