Почему child flex div растягивает туче к родительскому?

Question

Я бы хотел установить минимальную ширину div, содержащего карту Bootstrap 4.Внутри карты есть вход и кнопка.

       <div class="content col-sm-12 justify-content-center d-flex">
          <div class="card text-center w-75 mt-2">
            <div class="card-body d-flex justify-content-center ">

                <input spellcheck="false" placeholder="Enter the link" id="search" type="text" class="form-coltrol col-7"  value="" />
                <button id="download" class="font btn btn-primary shadow-none">
                    Download
                </button>
            </div>
          </div>
        </div>

Содержимое класса имеет правило

min-width: 1000px;

И я был очень удивлен, что входы внутри карты были растянуты вертикально, см. Весь кодздесь https://jsfiddle.net/zzmaster/5v26uL7w/7/

Проверка ввода в браузере консоли CSS Я не вижу никаких правил, касающихся высоты!Что происходит?

Answer 1

В качестве альтернативного решения вы можете добавить

.card-body {
   align-items: baseline;
}

к вашему CSS.

Вот рабочая демонстрация: https://jsfiddle.net/8dvt3fp6/3/

html,
body {
  background-image: url("https://enjoycss.com/bg-img/default/7_3.png");
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
}

.font {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 25px;
  letter-spacing: 2px;
  word-spacing: 2px;
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  font-variant: small-caps;
  text-transform: capitalize;
  text-shadow: 2px -2px 2px #FF9800;
}

.header {
  color: #5E5E5E;
  background-color: #e61d8a;
  text-align: right;
  color: white;
  margin-top: 1em;
}

.container {
  background-color: white;
}

#search {
  border-radius: 10px 0 0 10px;
}

#search:focus {
  outline: none;
  border-color: #0e00ff;
}

#download {
  border-radius: 0 10px 10px 0;
}

.content {
  min-height: 800px;
}

.card-body {
  align-items: baseline
}

<div class="container">
  <div class="row">

    <div class="content col-sm-12 justify-content-center d-flex">
      <div class="card text-center w-75 mt-2">
        <div class="card-body d-flex justify-content-center ">
          <input spellcheck="false" placeholder="Enter the link" id="search" type="text" class="form-coltrol col-7" value="" />
          <button id="download" class="font btn btn-primary shadow-none">
					Download
				</button>
        </div>
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Answer 2

Поскольку align-items:stretch является поведением flexbox по умолчанию.Используйте класс Bootstrap align-items-start, чтобы переопределить этот ...

      <div class="card-body d-flex justify-content-center align-items-start ">
        <input spellcheck="false" placeholder="Enter the link" id="search" type="text" class="form-coltrol col-7"  value="" />
        <button id="download" class="font btn btn-primary shadow-none">
            Download
        </button>
      </div>

или , используйте align-items-center, если хотите, чтобы он был центрирован по вертикали: https://www.codeply.com/go/Qu0u4CFHIP