html - Select 元素的增长与 display flex 中的 input 不同

Question

我遇到了意外行为 in my setup .输入按预期水平增长，但在带有选择控件的行上，增长似乎扭曲了。

我怀疑某些风格有所不同，但仔细检查后一无所获。谷歌搜索没有给出任何信息，我找不到任何关于隐式边距或选择填充的信息。

这是关于什么的，我该如何杀死它？

div.full-page {
  margin: 20px;
  padding: 20px;
  background: ghostwhite;
}

div.input-section {
  border: 3px none darkorchid;
  width: 600px;
}

div.input-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 18px;
  border-bottom: 2px solid darkorange;
  padding-bottom: 5px;
}

div.input-row {
  border: 3px none darkolivegreen;
  display: flex;
}

div.input-element {
  border: 3px none darkcyan;
  padding: 10px;
  flex-grow: 1;
  // display:flex;
}

div.input-element input,
div.input-element select {
  width: 100%;
  // border: solid 1px mediumvioletred;
  // padding: 0;
  // margin: 0;
}

div.input-caption {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: darkgrey;
  font-size: 14px;
}

<div class="full-page">

  <div>

    <div class="input-section">
      <div class="input-title">Title 1</div>

      <div class="input-row">
        <div class="input-element">
          <div class="input-caption">Uno</div>
          <input type="text" placeholder="Konrad">
        </div>
        <div class="input-element">
          <div class="input-caption">Duo</div>
          <input type="text" placeholder="Viltersten">
        </div>
      </div>

    </div>

    <div #privs class="input-section">
      <div class="input-title">Title 2</div>

      <div class="input-row">
        <div class="input-element">
          <div class="input-caption">Tress</div>
          <input placeholder="Is really">
        </div>

        <div class="input-element">
          <div class="input-caption">Quatro</div>
          <select>
            <option>The one and only</option>
          </select>
        </div>
      </div>

    </div>

</div>

Answer 1

您正在使用 flex-grow: 1 来调整您的 flex 元素的大小。当所有元素都相同或包含相同内容时，这很好。

除了您的 flex 元素之一是不同的。它有 select 元素。这将影响元素的大小，因为 flex 元素的初始值为 flex-basis: auto。

使用 flex-basis: auto flex-grow 属性在 元素的宽度被考虑在内后生效。因为元素的宽度不同，应用 flex-grow 后它们的大小将不同。

你需要使用flex-basis: 0，它允许flex-grow忽略元素的宽度，只关注容器中的可用空间。

代替 flex-grow: 1 使用这个:

• flex: 1

这是以下内容的简写:

• flex 增长:1
• flex-shrink: 1
• flex 基础:0

有关详细信息，请参阅规范:https://www.w3.org/TR/css-flexbox-1/#flex-common

此外，为了解决此类问题，规范建议始终使用 flex 简写而不是普通属性:

7.2. Components of Flexibility

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.