input テキスト入力欄を可変にしたい。

##分からないこと・解決したいこと
テキスト入力欄を画像のように、右側ボタンの横ぎりぎりぐらいまで来るように
どのようなブラウザサイズでもしたいのですが、サイズが可変になりません。

##試したこと
inputタグにsize="1"を設定してみたりなどしましたが、うまくいきませんでした。
flexの設定がおかしいのでしょうか。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>テスト</title>
    <meta name="description" content="">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>
  <body>
    <div class="searchArea">
      <div class="searchArea__buttonArea">
        <input type="button" value="適当なボタン" class="searchArea__buttonArea--black" />
      </div>
      <div class="searchArea__input">
        <h4 class="searchArea__inputTitle"><label for="syohin">注文商品</label></h4>
          <span class="searchArea__input--text">
            <span>
              <label class="searchArea__inputIcon"><i class="fa fa-search"></i></label>
              <input type="text" id="syohin" placeholder="希望の野菜・フルーツを入力" class="searchArea__inputIcon--text" />
            </span>
          </span>
        </div>
        <div class="searchArea__buttonArea">
          <input type="button" value="販売場所のマップを表示" class="searchArea__buttonArea--black" />
        </div>
    </div>
    <style type="text/css">
      .searchArea {
        display: flex;
        align-items: center;
        margin: 0 auto;
        max-width: 1200px;
        width: 100%;
      }
      .searchArea__input {
        display: inline-flex;
        align-items: center;
        flex: 1;
      }
      .searchArea__inputTitle {
        margin-left: 20px;
      }
      .searchArea__inputIcon {
        position: absolute;
        padding-left: 5px;
        margin-top: 7px;
        margin-left: 20px;
      }
      .searchArea__inputIcon--text {
        margin-left: 10px;
        padding-left: 40px;
        border-radius: 25px;
        height: 30px;
        min-width: 300px;
        width: auto;
        border: 2px solid #ccc;
      }
      .searchArea__buttonArea--black {
        display: inline-block;
        border-radius: 4px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        padding: 15px 12px;
        background: #333;
        font-weight: bold;
        color: #fff;
      }

    </style>
  </body>
</html>

教えていただきたいです。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

幅を広げたい要素の親要素はどうなっているか、更にその親要素はどうかと、遡ってみるとどこを触ればいいかがわかります。
スマホ用のレイアウトは別途調整が必要ですが、以下の追加・変更でタブレット以上の画面サイズならいけるはずです。

css
1.searchArea__inputIcon--text {
2    margin-left: 10px;
3    padding-left: 40px;
4    border-radius: 25px;
5    height: 30px;
6    /* min-width: 300px;  不要 */
7    width: 100%;  /* auto から 100%に変更 */
8    border: 2px solid #ccc;
9}
10
11/* 以下、追加 */
12.searchArea__input--text {
13    flex: 1;
14}
15      
16.searchArea__input--text span {
17    display: flex;
18    margin-right: 10px;
19}