3

I have 2 divs arrange column in flex, I want their distance = 1%, this is my code:

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 1%; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

It works well in IE or Chrome but not works in Firefox. How can I fix it?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
De Papier
  • 35
  • 1
  • 5

2 Answers2

1

You can use px instead of % to define margin, Its working everywhere (all browsers)

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom:10px; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>
Rohit Verma
  • 3,657
  • 7
  • 37
  • 75
0

Please try this code.

It's due to display:flex is not working well with % in Firefox. So here you need to used display:block to container1 div.

Use this code when you are using % in margin-bottom.

<div class="container1" style="display: block; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 1%; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

Please try this code when you are using PX not % in margin-bottom.

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 10px; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>
Emipro Technologies Pvt. Ltd.
  • 14,598
  • 5
  • 45
  • 75