1

I want to have two elements appear side by side in my website sidebar. I have

<form class="searchForm">
  <input type="text" name="search" class="form-control" >
  <input type="submit" value="Search" id="search" name="search" >
</form>

And styled it with the following

input {
    margin: 0;
}

.searchForm {
        display: flex;
}

.form-control {
    width: 80%;
}

My trouble is although this displays properly on Chrome, on Firefox, the button is getting cut off. I have prepared a demo. Does anyone know how I can make the button display on Firefox then same way it does on Chrome? I tried changing my CSS "display:flex;" to be "display:block" but then the elements appear on different horizontal planes.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
satish
  • 703
  • 5
  • 23
  • 52
  • Add `min-width: 0` to the `input` elements (solves FF problem). You need one more step for Edge: add `flex-shrink: 0` to `#submit`. https://jsfiddle.net/t5jft7b9/27/ – Michael Benjamin Mar 01 '18 at 20:59
  • I suggest removing width settings and replacing them with a single [`flex-basis`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis). I set the `flex-basis` for `#contentArea` to 75%. [Working example](https://jsfiddle.net/t5jft7b9/30/). – showdev Mar 01 '18 at 21:01

0 Answers0