Свойство flex-flex Flexbox не учитывается, если элемент flex содержит элемент ввода

Question

Я использую flexbox для создания интерфейса чата. Сначала используя свойство flex-grow, я делю макет на 2 столбца с соотношением 2/5, а затем разделяю эти 2 столбца на строки с соотношением 1/9 для первого столбца и 5/1 для второго. Это то, что у меня есть, когда я не добавил элементы ввода в HTML-код:

https://codepen.io/thenr/pen/PoooyEN

#chat {
  display: flex;
  width: 100%;
  height: calc(100vh - 2em);
  overflow-y: hidden;
}

#friends {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

#messages {
  flex-grow: 5;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

#searchfriend {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 120px;
  border: 1px solid black;
  background-color: blue;
}

#searchfriend input[type="text"] {
  margin: 0;
  padding: 1em;
  border: 0;
  border-radius: 0px;
  background-color: #d1d1d1;
}

#friendslist {
  flex-grow: 9;
  border: 1px solid black;
  overflow-y: auto;
}

.friend {
  height: 100px;
  border: 1px solid black;
}

#chatmessages {
  flex-grow: 5;
  border: 1px solid black;
}

#writemessage {
  flex-grow: 1;
  border: 1px solid black;
}

<div id="chat">
  <!-- friends -->
  <div id="friends">
    <div id="searchfriend">

    </div>
    <div id="friendslist">
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>

    </div>
  </div>

  <!-- chat -->
  <div id="messages">
    <div id="chatmessages">



    </div>
    <div id="writemessage">

    </div>
  </div>
</div>

Проблема в том, что когда я добавляю элементы ввода в HTML-код, установленные мной значения не соблюдаются, а элементы flex, содержащие эти элементы ввода, увеличиваютсяи я не хочу, чтобы это случилось. Тот же HTML-код, но с добавленными элементами ввода:

https://codepen.io/thenr/pen/RwwweQN

#chat {
  display: flex;
  width: 100%;
  height: calc(100vh - 2em);
  overflow-y: hidden;
}

#friends {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

#messages {
  flex-grow: 5;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

#searchfriend {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 120px;
  border: 1px solid black;
  background-color: blue;
}

#searchfriend input[type="text"] {
  margin: 0;
  padding: 1em;
  border: 0;
  border-radius: 0px;
  background-color: #d1d1d1;
}

#friendslist {
  flex-grow: 9;
  border: 1px solid black;
  overflow-y: auto;
}

.friend {
  height: 100px;
  border: 1px solid black;
}

#chatmessages {
  flex-grow: 5;
  border: 1px solid black;
}

#writemessage {
  flex-grow: 1;
  border: 1px solid black;
}

<div id="chat">
  <!-- friends -->
  <div id="friends">
    <div id="searchfriend">
      <input type="text" name="" id="searchtext" placeholder="Search friend...">

    </div>
    <div id="friendslist">
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>
      <div class="friend"></div>

    </div>
  </div>

  <!-- chat -->
  <div id="messages">
    <div id="chatmessages">



    </div>
    <div id="writemessage">
      <form action="" id="formchat">
        <input type="text" name="msgtext" id="msgtext" autocomplete="off">
        <button id="msgsend">Send</button>
      </form>
    </div>
  </div>
</div>

Answer 1

Вы можете использовать сокращенную запись flex:2 / flex: 5 вместо flex-grow:2 / flex-grow:5.

Вам также не придется устанавливать flex-shrink и flex-basis.