让兄弟使用动态宽度元素的宽度

Question

这似乎只是chrome上的一个问题

我有两个元素应该共享固定宽度div的宽度。最右边将有一些动态生成的文本，并使用css设置样式以具有大填充，以便我在左侧有一些空间用于图标（不在示例中）。

我不希望最右边的元素突破到新行或超出外部div的范围。最左边的input元素应该用尽全部剩下的空间。

HTML：

<div id = "outer" >
  <input type="text" class="theinput">
  <span class="thetext"> hello world </span>
</div>

CSS：

.theinput{
  width:auto;
}

.thetext{ 
  border-style: solid;
  border-width: 1px;
  border-color: blue;

  padding: 0px 0px 0px 25px
}

#outer{
  border-style: solid;
  border-width: 1px;
  border-color: black;

  display:inline-block;
  width:260px;
}

我实际看到的是，一旦我向第二个元素添加填充，它就会突破两行。

我想只使用CSS和HTML，而不指定任何兄弟元素的固定（px或％）宽度

Answer 1

为什么不使用display: flex呢？这是你想要的吗？

.theinput {
  flex: 1;
  background-color: red;
}

.thediv {
  color: blue;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
  padding: 0px 0px 0px 25px
}

#outer {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  display: flex;
  width: 260px;
}

<div id="outer">
  <input type="text" class="theinput">
  <span class="thediv"> hello world fgfdgdfg</span>
</div>

Answer 2

除了@ elena的回答flex之外，事实证明另一个问题是min-width元素的input属性。添加min-width:0允许它缩小以容纳其他元素。