html - 如何创建一个与其父级一起收缩的内联 div

Question

我想创建一个布局，其中两个元素位于同一行。我正面临这些要求

• 元素必须保持在同一行，永远不要换到第二行
• 元素的长度取决于数据和用户输入(加载页面后是静态的，但事先不知道)
• 当窗口调整大小时，可用宽度可能会改变

这是我对 inline-block 元素的了解:

.container {
  white-space: nowrap;
  width: 33%;
  background-color: yellow;
  overflow: hidden;
}

.button {
  display: inline-block;
  border: 1px solid green;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  <div class="button">Button</div>
  <div class="button">Rather long button text lorem ipsum dolor sit amet</div>
</div>

这基本上切断了第二个元素。理想情况下，它会缩小尺寸，看起来像这样，就好像它有一个 max-width

但是宽度可能会改变。有什么想法可以实现吗？

Answer 1

我不清楚你的要求，但到目前为止我所了解的是解决方案，如果你需要其他东西，请告诉我。

.container {
  white-space: nowrap;
  display: flex;
  overflow: hidden;
}

.button {
  display: inline-block;
  border: 1px solid green;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: yellow;
  
}

<div class="container">
  <div class="button">Button Button Button Button Button</div>
  <div class="button">Rather long button text lorem ipsum dolor sit amet button text lorem ipsum dolor sit amet butto button text lorem ipsum dolor sit ametn text lt</div>
</div>