Как сделать эту форму отзывчивой, используя flex box

Question

Я пытаюсь сделать эту форму отзывчивой. Мне нужно, чтобы форма оставалась на одной линии одинаковой ширины для всех элементов на больших экранах. Когда я изменяю направление изгиба на столбец, элементы переполняются до вершины. Мне нужно, чтобы поля формы располагались друг над другом со средних размеров экрана. Ссылка для codepen https://codepen.io/Nickbing/pen/RwwrOBp

<div class="container job-search-container">
    <div class="job-search-bar-section">
      <form class="search-form">
        <div class="search-form-group">
          <input
            id="keywords"
            type="text"
            class="search-form-input"
            placeholder="Enter Keywords"
            required
          />
        </div>
        <div class="search-form-group select-item-wrapper">
          <select class="search-form-select">
             <option value="" selected disabled hidden>Categories</option>
            <option value="volvo">IT</option>
            <option value="saab">Civil</option>
          </select>
        </div>
        <div class="search-form-group select-item-wrapper">
          <select class="search-form-select">
            <option value="" selected disabled hidden>Locations</option>
            <option value="volvo">New York</option>
            <option value="saab">California</option>
          </select>
        </div>
        <div class="search-form-group">
          <button type="submit">
            Search Jobs
          </button>
        </div>
      </form>
      <div class="all-jobs">
        <a href="#">all jobs</a>
      </div>
    </div>
  </div>

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; // 1rem = 10px, 10px/16px = 62.5%
}

body {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.container {
  display: flex;
  justify-content: center;
}

.job-search-container {
  height: 20rem;
  background-color: lightcoral;

  .job-search-bar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 120rem;
    width: 100%;
    padding: 1rem;

    .search-form {
      width: 100%;
      display: flex;
      //flex-direction: column;
      justify-content: space-between;
      flex-wrap: wrap;
      &-group {
        flex: 1;
        margin-right: 2rem;
        margin-bottom: 1rem;
        //width: 100%;
         input {
          font-family: inherit;
          font-size: 2rem;
          font-weight: 400;
          padding: 2rem;
          // width: 100%;
          height: 5rem;
        }

        select {
          width: 100%;
          height: 5rem;
          font-size: 2rem;
          font-weight: 600;
          padding-left: 1rem;

        }

         button {
          display: inline-block;
          width: 100%;
          height: 5rem;
          font-size: 2rem;
          font-weight: 500;
          text-transform: uppercase;
          background-color: black;
          color: white;
          border: 0;


        }
      }
    }

    .all-jobs {
      margin-right: auto;
      font-size: 2rem;
    }
  }
}

 // @media screen and (max-width: 768px) {
 //        .search-form {
 //    flex-direction: column;
 //    justify-content: center;
 //    align-items: center;
 //  }
 //    }

Редактировать: ОК, если я изменю высоту .job-search-container на фиксированную высоту, это будет работать. Мне нужно, чтобы он работал с чем-то вроде max-height / занимал необходимое место.

Answer 1

Вы можете использовать этот код

* {
	margin: 0;
	padding: 0;
}
*, *::before, *::after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
	font-size: 62.5%;
}
body {
	font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	margin: 0PX;
}
.container {
	display: flex;
	justify-content: center;
}
.job-search-container {
	background-color: lightcoral;
	.job-search-bar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 4rem;
		.search-form {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.search-form-group {
			margin-right: 2rem;
			margin-bottom: 1rem;
			flex-grow: 1;
			input {
				font-family: inherit;
				font-size: 2rem;
				font-weight: 400;
				padding: 2rem;
				height: 5rem;
				width: 100%;
			}
			select {
				width: 100%;
				height: 5rem;
				font-size: 2rem;
				font-weight: 500;
				padding-left: 1rem;
			}
			button {
				display: inline-block;
				width: 100%;
				height: 5rem;
				font-size: 2rem;
				font-weight: 500;
				text-transform: uppercase;
				background-color: black;
				color: white;
				border: 0;
			}
		}
		.all-jobs {
			margin-right: auto;
			font-size: 2rem;
		}
	}
}

Answer 2

пошагово, примените эти изменения.

1. уберите высоту контейнера страницы и установите отступы сверху и снизу так, как вам нужно.

.job-search-container {
  height: auto;// or remove
  background-color: lightcoral;
  padding: 60px 0;
}

2.добавьте некоторыезаполнен со 100% значением по умолчанию для поля ввода.

.job-search-container .job-search-bar-section .search-form-group input{
    width:100%;
 }

необязательно: для лучшего удаления удалите поле справа от группы форм поиска на мобильном уровне

@media screen(max-width:768px){
   .job-search-container .job-search-bar-section .search-form-group input{
    margin-right:0;
 }    
}

ниже 768px (мобильный экран) измените ширину группы форм поиска на 100% и удалите свойство flex, используя медиазапрос для мобильных экранов, например,

   @media screen (max-width:768px){
      .job-search-container .job-search-bar-section .search-form-group{
          flex:inherit;
          width:100%;
      }
   }

, если у вас естьлюбые сомнения по поводу приведенного выше кода, я здесь, чтобы помочь вам, спасибо