根据特定容器调整弹出窗口的宽度

Question

我有一个弹窗，其中包含两个容器：

1. 文本容器
2. 按钮容器

弹窗的宽度为370px，按钮显示在文本下方。

只有当按钮中有长文本导致弹窗宽度增加时（按钮应始终显示在一行中），才能更改弹窗的宽度。

如果文本容器中有长文本，则弹窗的宽度应保持为370px。

例如：

1. 由于按钮中的长文本，弹窗宽度为383px：

2. 弹窗宽度为370px（按钮文本可以在370px内显示）：

这是我的jsbin：

http://jsbin.com/fuzozehipo/1/edit?html,css,output

HTML：

<div class="popup">
  <div class="text-container">some text</div>
  <div class="buttons-container">
    <button>Button 1 with long long long long long long text</button>
    <button>Button 2</button>
  </div>
</div>  

CSS：

.popup {
  display: inline-block;
  position: relative;
  border: 1px solid;
  min-width: 370px;
}

.text-container {
  width: 100%;
}

任何帮助都将受到赞赏！

- Alon Shmiel

---

不使用 JavaScript？ - amitdigga

Answer 1

你可以使用一个有趣的Flex渲染技巧，通过将子元素的宽度设置为0来防止文本扩展父容器。然后只需设置min-width: 100%以确保它占据整个父容器的宽度，而这现在仅由按钮的宽度控制。具体实现方法请参考此处。

.popup {
  border: 1px solid;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  min-width: 370px;
  display: inline-flex;
  flex-direction: column;
}

.text {
  width: 0;
  min-width: 100%;
}

.buttons {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
}

button + button {
  margin-left: 10px;
}

<div class="popup">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at porta sapien. Quisque sapien justo, fringilla consectetur molestie eu, hendrerit vehicula purus. Pellentesque ac ante urna.
  </div>
  <div class="buttons">
    <button>Really long text that will make the buttons push out the parrent div</button>
    <button>text</button>
  </div>
</div>

- Steven Lambert

---

太棒了，感谢提供链接！ 我明天会给你打赏（我可以在开始后的24小时内颁发它）。非常感谢！ - Alon Shmiel

Answer 2

你能做像这样的事情吗？

.wrapper {
  display: inline-block;
  position: relative;
  border: 1px solid;
  min-width: 370px;
}

.buttons-container {
  display: flex;
  flex-direction: row;
}

.buttons-container > button {
  flex: 1;
  white-space: nowrap;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buttons-container > button:first-child {
  margin-left: 0;
}

.text-container {
  width: 100%;
}

- janhartmann

Answer 3

对于文本，预期.popup会随着文本增长而增长，因为它是一个inline-block元素，所以width: 100%;的行为不像您想要的那样。由于您硬编码了370px的值，因此我认为在.text-container的规则集中重用它作为max-width规则的一部分没有问题。尽管如此，看起来您的截图上有一个padding: 30px;的规则，因此如果您正在使用box-sizing: border-box，请通过使.text-container的max-width为310px来补偿.popup的填充，即width - 每侧的padding。

对于按钮，请在您的.buttons-container上使用white-space: nowrap;，以保持您的按钮在同一行上，尽管.popup的inline-block的前述行为应该自己处理。

.popup {
  display: inline-block;
  position: relative;
  border: 1px solid;
  min-width: 370px;
}

.text-container {
  max-width: 370px; /* Compensate for the padding if using box-sizing: border-box */
}

.buttons-container {
  white-space: nowrap;
}

<div class="popup">
  <div class="text-container">some text that is also white long but that goes to the next line when it reaches a certain width</div>
  <div class="buttons-container">
    <button>Button 1 with longer text</button>
    <button>Button 2 with some text as well</button>
  </div>
</div>

- chriskirknielsen

---

谢谢@chriskirknielsen！它非常接近，但它会换行文本，尽管还有另一个空间可以放置文本。我认为“line when it”有足够的空间可以在第一行中显示。(这是因为最大宽度)。https://codepen.io/alonsh/pen/NYjZdo - Alon Shmiel

@AlonShmiel 请尝试添加以下内容：white-space: nowrap; - user7976244