将输入字段与小屏幕中的按钮对齐超出范围

Question

我正在尝试将输入字段与聊天底部的按钮对齐。

这是正常屏幕尺寸 +15" 上的结果

这是 -15" 上的结果

HTML：

 <div class="col footer">
  <div class="divider"></div>
  <div class="row footer-input input-container form-group">
    <div class="input-field inline col s10 m10">
      <input #messageInput type="text">
      <label for="message">Tapez votre message</label>
    </div>
    <div class="col button-col s2 m2">
      <a class="waves-effect btn blue"">
        <i class="material-icons">send</i></a>
      <app-loading-panel [visible]="isSending"></app-loading-panel>
    </div>
  </div>
</div>

CSS：

div.divider {
  margin-top: 2px;
}

div.footer {
  position: absolute;
  bottom: 0;
  margin: 0;
  width: 100%;
}

div.input-container {
  vertical-align: middle;
  padding-top: 10px;
}

input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #2196F3;
  box-shadow: 0 1px 0 0 #2196F3;
}

input[type=text]:focus:not([readonly]) + label {
  color: #2196F3;
}

div.footer-input {
  margin-bottom: 0;
}

div.button-col {
  height: 100%;
}

我不擅长css，我怎样才能让输入占据它可以占据的所有位置，按钮在右侧并且垂直居中并且没有超出范围？

Answer 1

从基本的角度来看，这可能会对您有所帮助：

1. 拥有一个弹性盒子的容器
2. 为输入分配 1 的 flex-grow
3. 这将确保输入占用大部分空间，而按钮仍保留在右侧。

.container {
  width: auto;
  background: #ebebeb;
  display: flex;
  flex-direction: row;
}
.container input {
  flex-grow: 1;
}

<div class="container">
  <input type="text" placeholder="Some Stuff"/>
  <button> Button </button>
</div>