title: Form Layout behaving abnormally on firefox
body: <p>I have designed a form using flexboxes. Form is working fine on chrome and internet explorer but the the section where 3 fields are placed side by side overflows out of the form in firefox but looks well on chrome. Any possible solution. I tried defining width to each field but couldn't find any possible solution yet. Any possible solution</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Row1{
      margin-top:-3px;
      display:flex;
      flex-direction: row;
      flex-wrap:wrap;
      justify-content:center;
      align-items:flex-start;
      background-image:url(Media/Mask\ Group\ 14.jpg);
      background-position:center bottom;
      background-size:cover;
      padding:6% 15%;
  }
  .content{
      display:flex;
      flex-direction:column;
      margin:5% 5% 0 5%;
      flex-basis:40%;
  }
  .content h1{
      font-family:Roboto , Arial , sans-serif;
      font-weight:600;
      font-size:2.0625rem;
      text-align:left;
      color:#ffffff;
      letter-spacing:0.015em;
  }
  .content p,.content2 p{
      font-family:roboto,arial,sans-serif;
      font-weight:400;
      color:#b4b4b4;
  }
  .content h2,.content2 h1{
      font-family:Roboto , Arial , sans-serif;
      font-weight:300;
      color:#ffffff;
  }
  .contactDetails{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-start;
      align-items:flex-start;
      margin:0;
  }
  .cell, .UAN{
      justify-content:center;
      align-items:center;
      padding:5px;
      display:flex;
      margin-top:-30px;
  }
  .fa-globe , .fa-phone-alt{
      color:#ffffff;
      font-size:25px;
      text-align:left;
  }
  .cell p, .UAN p{
      padding:10px;
      color:#ffffff;
      font-size:20px;
      font-family: Roboto, Arial , sans-serif;
      text-align:left;
  }
  /*Styling of Booking Form */
  form{
      width:100%;
  }
  .bookingForm{
      padding:2%;
      background:#303030;
      flex-basis:45%;
      margin:3% 0 7% 0;
      position:relative;
      max-width:100%;
  }
  
  .bookingForm h2{
   color:#000733;
   font-family:Sen, arial, sans-serif;
   font-size:35px;
   font-weight:700;
   line-height:40px;
  }
  .inputBox{
      display:flex;
      width:calc(100%-10px);
      margin:15px 5px;
      position:relative;
  }
  label{
      position:absolute;
      top:-15px;
      left:0px;
      font-family: Roboto,Arial,sans-serif;
      font-size:12px;
      color:#b4b4b4;
  
  }
  .icon{
      padding:10px;
      color:#b4b4b4;
      border-bottom:1px solid #b4b4b4;
      font-size:16px;
  }
  .Xchangeholder{
      padding:12px;
      position:relative;
  }
  .iconXchange{
      border:none;
      transform:rotate(90deg);
      position:absolute;
      right:0px;
    
  }
  .inputField{
     /* padding:10px;*/
      border:none;
      background:#303030;
      border-bottom:1px solid #b4b4b4;
      outline:none;
      width:100%;
  }
  input:focus::placeholder{
      color:transparent;
  }
  .FPL{
   display:flex;   
  }
  .Fleet{
      /*flex-basis:55%;*/
      /*width:calc(60%-10px);*/
      /*margin:10px 3px 10px 10px;*/
      width:50%;
  }
  .passngr{/*flex-basis:22%;*/   /*width:calc(20%-10px);*/
      /*margin:10px 3px 10px 0px;*/
      width:25%;
  
  }
  .lugg{
      /*flex-basis:22%;*/
     /* width:calc(20%-10px);*/
    /* margin:10px 0px;*/
    width:25%;
  }
  .dateNtime{
      display:flex;
      margin-bottom:20px;
  }
  .date , .time{
      width:50%;
  }
  input[type="time"],input[type="date"]{
      position:relative;
  }
  input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator {
      color:rgba(0,0,0,0);
      background:none;
      z-index:1;
  }
  input[type="time"]:before , input[type="date"]:after{
      color: transparent;
      background: none;
      display: block;
      font-family: 'FontAwesome';
      content: '\f107';
      cursor:pointer;
      /* This is the calendar icon in FontAwesome */
      width: 15px;
      height: 20px;
      position: absolute;
      top: 12px;
      right: 6px;
      color: #000;
  }
  
  /*Styling of toggle button in Forms */
  .switchButton{
      position:relative;
  }
  .switchButton h5{
      position:absolute;
      color:#606060;
      font-family:Roboto,Arial,sans-serif;
      font-size:16px;
      left:0px;
      bottom:-7px;
  }
  .switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 24px;
      margin-left: 60px;
    }
    
  /*.switch input { 
      opacity: 1;
      width: 0;
      height: 0;
    }*/
  
    .slider {
      border-radius:34px;
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
       background-color:#ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
      border-radius:50%;
    }
    
    input:checked + .slider {
      background-image: linear-gradient(to right, #f8c212 , #f8c212, #f8be13, #f8b216, #f89f1b, #f89c1c, #f89c1c);
    }
   /* 
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
    */
    
    input:checked + .slider:before {
      -webkit-transform: translateX(16px);
      -ms-transform: translateX(16px);
      transform: translateX(16px);
    }
  /* End of toggle button styling*/
  
  /*Forms buttons styling*/
  .buttons{
      display:flex;
      justify-content: space-evenly;
      margin-bottom:40px;
      
  }
  .loginButton , .qouteButton{
      padding:15px 45px;
      border:none;
      width:50%;
      color:white;
      font-family:Roboto,Arial,sans-serif;
      font-size:16px;
      font-weight:700;
      outline:none;
  }
  .loginButton{
      background:#000733;
      margin-right:20px;
  }
  .qouteButton{
      background-image: linear-gradient(to left, #f8c212 , #f8c212, #f8be13, #f8b216, #f89f1b, #f89c1c, #f89c1c);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
      &lt;head&gt;
          &lt;title&gt;Airport Taxi Service&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width , initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" href="ATS.css"&gt;
          &lt;script src="https://kit.fontawesome.com/5631a5be5b.js" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&amp;display=swap" rel="stylesheet"&gt;
          &lt;link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&amp;family=Sen:wght@400;700;800&amp;display=swap" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;       
          &lt;div class=" Row Row1"&gt;
              &lt;div class="content"&gt;
                  &lt;h1&gt;AirportTaxi Service&lt;/h1&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra maximus auctor. Nullam dignissim pretium leo quis vulputate. Ut non gravida ligula. Duis quis condimentum eros. Aenean enim urna, ultricies in lacus in, bibendum gravida elit. Nam tempor, neque a vulputate consectetur, est sem tempor diam, eget rhoncus elit nulla.&lt;/p&gt;
                  &lt;h2&gt;ONWARD TRAVEL SOLUTIONS&lt;/h2&gt;
                  &lt;div class="contactDetails"&gt;
                      &lt;div class="cell"&gt;&lt;i class="fas fa-phone-alt"&gt;&lt;/i&gt; &lt;p&gt;0300 *******&lt;/p&gt;&lt;/div&gt;
                      &lt;div class="UAN"&gt;&lt;i class="fas fa-globe"&gt;&lt;/i&gt;&lt;p&gt;+1 2026 334&lt;/p&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="bookingForm"&gt;
  
                  &lt;form&gt;
                      &lt;h2&gt;Book Now&lt;/h2&gt;
                      &lt;div class="inputBox pickup"&gt;
                          &lt;i class="icon fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;label for="fromLoc"&gt;PickUp:&lt;/label&gt;
                          &lt;input type="text" class="inputField" id="fromLoc" name="fromLoc" placeholder="PickUp point"&gt;
                      &lt;/div&gt;
                      &lt;div class="inputBox Xchangeholder"&gt;
                          &lt;i class="fa fa-exchange icon iconXchange" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                    
                      &lt;div class="inputBox dropOff"&gt;
                          &lt;i class="icon fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;label for="toLoc"&gt;Destination:&lt;/label&gt;
                          &lt;input type="text" class="inputField" id="toLoc" name="toLoc" placeholder="Destination point"&gt;
                      &lt;/div&gt;
                      &lt;div class="FPL"&gt;
                          &lt;div class="inputBox Fleet"&gt;
                              &lt;i class="fa fa-car icon" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;label for="fleet"&gt;Fleet:&lt;/label&gt;
                              &lt;select class="inputField" name="fleet" id="carFleet"&gt;
                              &lt;option value="Economy"&gt;Economy&lt;/option&gt;
                              &lt;option value="Average"&gt;Average&lt;/option&gt;
                              &lt;option value="Luxury"&gt;Luxury&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                          &lt;div class="inputBox passngr"&gt;
                              &lt;i class="fa fa-user icon" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;label for="passenger"&gt;Passengers:&lt;/label&gt;
                              &lt;input class="inputField" type="number"placeholder="0" id="Passngr"name="passenger" min="1" max="5"&gt;
                          &lt;/div&gt;
                          &lt;div class="inputBox lugg"&gt;
                              &lt;i class="fa fa-suitcase icon" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;label for="luggage"&gt;Luggage:&lt;/label&gt;
                              &lt;input class="inputField" placeholder="0" type="number" id="Luggage" name="luggage" min="1" max="30"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="dateNtime"&gt;
                          &lt;div class="inputBox date"&gt;
                              &lt;i class="fa fa-calendar icon" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;label for="date"&gt;Date:&lt;/label&gt;
                              &lt;input class="inputField" type="date" name="date" value="2020-10-31" min="2020-10-31" max="2090-12-31"&gt;
                          &lt;/div&gt;
                          &lt;div class="inputBox time"&gt;
                              &lt;i class="fa fa-clock-o icon" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;label for="time"&gt;Time:&lt;/label&gt;
                              &lt;input class="inputField" type="time" name="time" value="12:00"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="inputBox switchButton"&gt;
                          &lt;h5&gt;Return:&lt;/h5&gt;
                          &lt;label class="switch"&gt;
                              &lt;input type="checkbox" checked&gt;
                              &lt;span class="slider"&gt;&lt;/span&gt;
                            &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="dateNtime"&gt;
                          &lt;div class="inputBox date"&gt;
                              &lt;i class="fa fa-calendar icon" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;label for="date"&gt;Date:&lt;/label&gt;
                              &lt;input class="inputField" type="date" name="date" value="2020-10-31" min="2020-10-31" max="2090-12-31"&gt;
                          &lt;/div&gt;
                          &lt;div class="inputBox time"&gt;
                              &lt;i class="fa fa-clock-o icon" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;label for="time"&gt;Time:&lt;/label&gt;
                              &lt;input class="inputField" type="time" name="time" value="12:00"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="inputBox buttons"&gt;
                          &lt;input class="loginButton" type="submit" value="Login"&gt;
                          &lt;input class="qouteButton" type="submit" value="Quote"&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>