html - 为什么 &lt;input&gt; 的行为不像普通的 <div>？

Question

我不明白 <input[type="number"]> 如何与 min-width 和 max-width 一起工作。他们似乎对此没有影响。

目标:我想创建一个 UI 来查看和更改数字变量。

我想要这种行为(<input> 是黄色的):

当“值”是 <div> 或 <span> 但不是 <input> 时它起作用。

我正在使用 flexbox。

如果我设置一个 width: 50px 而不是 min-width: 50px ，它几乎是好的，但如果名称变长，值就会缩小。

我快到了!帮助我<3

body {
  font-family: 'Open sans';
  /* width: 216px; */
  margin-bottom: 30px;
}
p,
ul,
li {
  width: 208px;
  font-size: 12px;
}
.property {
  width: 200px;
  margin: 8px;
  display: flex;
  justify-content: space-between;
  background-color: sienna;
  font-size: 15px;
  color: white;
}
.name,
.value {
  box-sizing: border-box;
  min-width: 50px;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.name {
  flex-grow: 0;
  /* default */
  flex-shrink: 1;
  /* default */
}
.value {
  max-width: 150px;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: orange;
  text-align: right;
}
input[type=number] {
  /* reset style */
  -moz-appearance: textfield;
  border: none;
  margin: 0;
  color: inherit;
  font: inherit;
  padding: 5px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.specificWidth {
  width: 50px;
}

<h1>UI to see and change numeric variables</h1>
<h3>Desired behaviour:</h3>
<p>Normal state:</p>

<div class="property">
  <div class="name">name</div>
  <div class="value">value</div>
</div>

<div class="property">
  <div class="name">x</div>
  <div class="value">10</div>
</div>

<br>
<p>When name is longer, its container grows:</p>

<div class="property">
  <div class="name">name</div>
  <div class="value">value</div>
</div>

<div class="property">
  <div class="name">long name</div>
  <div class="value">value</div>
</div>

<div class="property">
  <div class="name">really long name</div>
  <div class="value">value</div>
</div>

<p>But value <em>never</em> shrinks:</p>

<div class="property">
  <div class="name">really really long name</div>
  <div class="value">value</div>
</div>

<p>Value can be long too:</p>

<div class="property">
  <div class="name">name</div>
  <div class="value">really long value</div>
</div>

<p>If both name and value are long, value wins:</p>

<div class="property">
  <div class="name">really long name</div>
  <div class="value">really long value</div>
</div>


<br>
<p>To handle extreme cases, they have a minimum width of 50px.</p>

<div class="property">
  <div class="name">min</div>
  <div class="value">really really long value</div>
</div>

<div class="property">
  <div class="name">really really long name</div>
  <div class="value">min</div>
</div>





<br>
<br>
<h3>Using &lt;input&gt; for value</h3>
<p>&lt;input&gt; doesn't behave like regular &lt;div&gt;. (It has some kind of default width that overrides min and max width)</p>

<div class="property">
  <div class="name">name</div>
  <input class="value" type="number" value="0">
</div>

<div class="property">
  <div class="name">longname</div>
  <input class="value" type="number" value="0">
</div>

<div class="property">
  <div class="name">really really long name</div>
  <input class="value" type="number" value="0">
</div>

<br>
<p>If I set a specific width (50px) it's' way better. But not perfect: value gets shrinked in favor of name.</p>

<div class="property">
  <div class="name">min</div>
  <input class="value specificWidth" type="number" value="0">
</div>

<div class="property">
  <div class="name">long name</div>
  <input class="value specificWidth" type="number" value="0">
</div>

<div class="property">
  <div class="name">really long name</div>
  <input class="value specificWidth" type="number" value="0">
</div>

<div class="property">
  <div class="name">really long name</div>
  <input class="value specificWidth" type="number" value="1234567890">
</div>

fiddle

Answer 1

如果我做对了 width:auto; 可能会解决你的问题