html - 让兄弟用完动态宽度元素的宽度

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>