After creating a well-designed ordered list of questions on my website using Bootstrap 4 and flexboxes, I encountered an issue with strange top padding in IE11 and Edge browsers. The list displays perfectly in Firefox and Chrome, but the formatting is off in IE11 and Edge due to this unexpected padding which only disappears when removing the flexboxes.
Here is how the list appears in Firefox and Chrome:
https://i.sstatic.net/3NuOo.png
However, this is how it looks in IE11 and Edge:
https://i.sstatic.net/ZbZTJ.png
For reference, here is a JSFiddle containing the code: https://jsfiddle.net/0g7mpovu
<ol class="mb-0">
<li class="px-3 py-1">
<div class="d-flex">
<div class="d-flex flex-column align-self-center flex-grow-1 w-100">
How would you describe a surplus in your own words?
</div>
<div>
<div class="dropdown">
<button type="button" class="btn btn-link" title="Actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h text-muted"></i>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Edit</a>
<a href="#" class="dropdown-item">Delete</a>
</div>
</div>
</div>
</div>
</li>
<li class="px-3 py-1">
<div class="d-flex">
<div class="d-flex flex-column align-self-center flex-grow-1 w-100">
What is a fiscal budget?
</div>
<div>
<div class="dropdown">
<button type="button" class="btn btn-link" title="Actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h text-muted"></i>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Edit</a>
<a href="#" class="dropdown-item">Delete</a>
</div>
</div>
</div>
</div>
</li>
</ol>
I am seeking advice on how to achieve consistent appearance across all browsers for my list. I am willing to consider alternative formats like tables, as long as the numbering can still be displayed.
Your assistance is appreciated in advance!