选择元素的增长与显示伸缩输入的增长不同

Question

我的设置出现意外行为。输入水平按预期水平增长，但在具有选择控件的行上，增长似乎失真。

我怀疑某些风格会有所不同，但仔细检查后我无处可去。谷歌搜索什么都没有，我找不到关于隐式边距或选择填充的任何信息。

这是怎么回事，我该怎么杀？

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弹性项目的大小。当所有项目相同或包含相同内容时很好。

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

使用flex-basis: auto该flex-grow属性后，将项目的宽度考虑在内。由于项目的宽度不同，flex-grow因此应用后的大小将有所不同。

您需要使用flex-basis: 0，它可以flex-grow忽略项目的宽度，而只关注容器中的可用空间。

而不是flex-grow: 1使用此：

• flex: 1

简写为：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

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

另外，为了解决此类问题，规范建议始终使用flex速记而不是速记属性：

7.2。灵活性的组成部分

鼓励作者使用flex 速记而不是直接使用其速记属性来控制灵活性，因为速记会正确地重置任何未指定的组件以适应常用。