How to preserve style of parent - html

Question

I have the following piece of code in a foreach:
FOREACH:
<div class="col-md-1" style="max-width: 50% !important" id="pageList_{{ presentationPage.position }}">
<a href="/customer/presentations/{{ id }}/edit?position={{ presentationPage.position }}">
<div class="slide-preview" style="background-color:{% if (presentationPage.position == activePresentationPage.position) %}#ffffff{% else %}#bbbbbb{% endif %}; border: 1px solid #000000; width:100%; padding:2px 5px; margin:5px; color:#000000; text-align:center;">
{{ presentationPage.position }}
</div>
</a>
</div>
ENDFOREACH
Which looks like this when rendered:
However, when I add something similar as an element or a div as you can see in the code below:
<div>
FOREACH:
<div class="col-md-1" style="max-width: 50% !important" id="pageList_{{ presentationPage.position }}">
<a href="/customer/presentations/{{ id }}/edit?position={{ presentationPage.position }}">
<div class="slide-preview" style="background-color:{% if (presentationPage.position == activePresentationPage.position) %}#ffffff{% else %}#bbbbbb{% endif %}; border: 1px solid #000000; width:100%; padding:2px 5px; margin:5px; color:#000000; text-align:center;">
{{ presentationPage.position }}
</div>
</a>
</div>
ENDFOREACH
</div>
The entire thing looks like this when rendered:
And I can't seem to find out why. A simple inspect doesn't bring any insights.

Answer 1

That is because the div that you put around the two elements doesn't have a specified width and height. Therefore the div will base its width and height on the size of its content. Then, your two elements will base their width and height on their parent's width and height, so it will get very small.
So if you give the parent div a width and height it should work out okay.