Question

我有两个Flex容器，每个容器width: 50%。在其中一个容器中，我在标签中包含输入并使其弯曲以拉伸所有空间并使标签与输入相同。

这适用于Chrome和IE但不会出现在Mozilla上，会出现水平滚动:(

我试过overflow: hidden，它修复了水平滚动但不是问题。由于输入上的填充现在不起作用，标签正在消失......

我在768px +视口宽度上发现了这个错误。在1200px一切都OK。但似乎这取决于标签长度。

链接到图片库（SO需要10个代表点来附加图片） - http://imgur.com/a/DBYGp

＆＃13;

.form-fields {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
  padding-left;
  55px;
  margin-bottom: 75px;
  border: none;
}

.custom-label {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-top: 18px;
  font-size: 14px;
  text-transform: uppercase;
}

.custom-input {
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  padding: 15px 25px;
  font-family: "Arial", sans-serif;
  font-size: 18px;
  font-weight: bold;
  background-color: #ddd;
  border: 0;
  outline: none;
}

.custom-input:active,
.custom-input:focus {
  background-color: #fff;
  box-shadow: inset 0 0 0 4px #e5e5e5;
}

.custom-label > .custom-input {
  margin-left: 10px;
}

＆＃13;

<div class="form-fields">
  <label class="custom-label custom-label--uppercase" for="first-name-id">First Name*:
    <input class="custom-input" type="text" name="first-name" id="first-name-id" placeholder="Something" />
  </label>
  <label class="custom-label custom-label--uppercase" for="last-name-id">Loremipsumdolot:
    <input class="custom-input" type="text" name="last-name" id="last-name-id" placeholder="Something">
  </label>
  <label class="custom-label custom-label--uppercase" for="middle-name-id">Nickname:
    <input class="custom-input" type="text" name="middle-name" id="middle-name-id" placeholder="Something">
  </label>
</div>

＆＃13;

标签flex中输入的水平溢出（仅限Firefox）

0 个答案: