css - 输入类型=范围在 Firefox 中不会拉伸(stretch)

Question

这是一个例子。我想让 slider 拉伸(stretch)到父容器的整个宽度。下面的代码在 Chrome 中看起来像我想要的，但在 Firefox 中 slider 没有拉伸(stretch)。但是，我在他们的跟踪器上找不到针对该问题的任何错误，也许我错过了一些东西？

#block {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: green;
  align-items: stretch;
}

input {
  background-color: yellow;
}

<div id=block>
  <input type=range />
</div>

Answer 1

具有列方向的 flex 容器，并且由于align-items的默认值为stretch，将拉伸(stretch) flex 元素以填充它的容器沿着其横轴，与其宽度相同。

所以在你的情况下它应该按原样工作，尽管在 Firefox、Edge 和 IE 中情况并非如此。它们都需要 width: 100% 来让 range 类型的 input 填充容器。

作为比较，text 类型的 input 和 checkbox 以及 textarea 可以跨浏览器拉伸(stretch)，但同样，checkbox 类型的 input 在 Firefox 中并不存在。

我还不能确定 Firefox(和 Edge/IE)是否正确或者是否存在错误。我已经搜索遍了，但找不到直接答案，但一旦找到，我就会更新这个答案。

因此，从今天开始，我建议将宽度设置为 100%，如果 Chrome 正确，则不会造成任何损害，并且可以稍后将其删除。

#block {
  /* width: 100%;              not needed since it is the default */
  height: 100%;             /* as its parent doesn't have a height, 
                               this doesn't do anything */
  display: flex;
  flex-direction: column;
  background-color: green;
  /* align-items: stretch;     this is the defalt and can be omitted */
}

input, textarea, span {
  background-color: yellow;

  width: 100%;              /* make FF/Edge/IE stretch input range */
  
  margin: 0;                /* remove any default margin an element might have */
  padding: 0;               /* remove any default padding an element might have */

  box-sizing: border-box;   /* include border an element might have in the set width */
}

<div id=block>
  <input type=range />
  
  <!-- added these for comparison -->
  <input type=checkbox />
  <input type=text value="Input text"/>
  <textarea>Textarea</textarea>
  <span>Span</span>
  
</div>