横並びになっている要素のうち１つの要素を流動的にしたい

Question

現在、学習の一環としてairbnb(リンク内容)のこちらのページを模写しております。
Bootstrap4の基本的な学習を終え、取り組んでいます。
こちらのページを検証してみると、ヘッダー（ロゴや検索欄などがある部分）にBootstrapは利用されていないと考え、ヘッダーは単純にHTMLとCSSを書いて作ろうと思っています。
ヘッダーの<div>要素は『ロゴ』『検索欄』『ホストを始める』『ヘルプ』『登録する』『ログイン』という合計６つの要素に分かれており、タブレットサイズ以下になると右４つの要素は隠れる仕様になっています。
そこでなのですが、タブレットサイズまでページを狭めていく過程で、『検索欄』以外の要素はwidthが固定されており変化がないのですが、『検索欄』の部分だけがページが狭まると流動的に縮んでいくことがわかります。

横並びになっている要素のうち１つの要素だけを流動的にするにはどうすればよいのでしょうか。

Comments

[yoshinavi]

＞横並びになっている要素のうち１つの要素だけを流動的にするにはどうすればよいのでしょうか。

→　「流動的（幅が可変）」と「流動的ではない（幅が固定）」の違いは何なのか？を考えてみましょう。
「レスポンシブ」「幅の可変」関連で検索すると、たくさんのヒントや答えがあると思います。自分で考えたコードを提示されないと「丸投げ」と低評価される可能性があります。

Answer 1

flexが便利ですよ。
例えばヘッダーがこんな構造だとして、

<div class="header">
  <div class="logo"></div>
  <div class="search"></div>
  <ul class="menu"></ul>
</div>

cssをこうすると、.searchのところだけ可変します。

.header {
  display: flex;
}
.header .logo{
  flex: 0 0 60px;
}
.header .search{
  flex: 1 1 auto;
}
.header .menu{
  flex: 0 0 300px;
}

Answer 2

開発者ツールを見ればいいと思いますよ。

._hgs47m { /* 親要素 */
	display: table !important;
	width: 100% !important;
	border-spacing: 0px !important;
}
._10ejfg4u { /* 検索欄 */
	display: table-cell !important;
	width: 100% !important;
	vertical-align: middle !important;
}
._ni9axhe { /* メニュー */
	display: table-cell !important;
	vertical-align: middle !important;
}