CSS Flexbox宽度宽度溢出100％

发布于 2025-02-04 17:47:24 字数 750 浏览 1 评论 0原文

我有两个问题：

1。）如何使黄色框更宽，即使长话长。有了“计算”，它将起作用，但这对我来说似乎不安全。还有另一个解释宽度自动的解决方案吗？

2.）制作输入文本包装的最安全方法是什么？

---
<style>
.container {
  width: 300px;
  background-color:#0f0;
  display: flex;
}
.left {
  width:200px;
  background-color:#f00;
}
.right {
  width:100%;
  background-color:#ff0;
}
</style>

<div class="container">
    Container 300px
</div>

<div class="container">
  <div class="left">
    This text.
  </div>
  <div class="right">
    This is a prettyveryveryveryveryveryveryveryveryveryveryveryverylong word. 
  </div>
</div>
---

html结果的屏幕快照

原文

I have two problems:

1.) How do I get the yellow box to not be wider than the parent flexbox even with long words. With "Calc" it would work, but that seems unsafe to me. Is there another solution that the width is automatically?

2.) What is the safest way to make the entered text wrap?

---
<style>
.container {
  width: 300px;
  background-color:#0f0;
  display: flex;
}
.left {
  width:200px;
  background-color:#f00;
}
.right {
  width:100%;
  background-color:#ff0;
}
</style>

<div class="container">
    Container 300px
</div>

<div class="container">
  <div class="left">
    This text.
  </div>
  <div class="right">
    This is a prettyveryveryveryveryveryveryveryveryveryveryveryverylong word. 
  </div>
</div>
---

screenshot of html result

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

神魇的王 2025-02-11 17:47:24

<style>
.container {
  width: 300px;
  background-color:#0f0;
  display: flex;
}
.left {
  width:200px;
  background-color:#f00;
}
.right {
  flex: 1;
  word-break: break-word;
  background-color:#ff0;
}
</style>

<div class="container">
    Container 300px
</div>

<div class="container">
  <div class="left">
    This text.
  </div>
  <div class="right">
    This is a prettyveryveryveryveryveryveryveryveryveryveryveryverylong word. 
  </div>
</div>

<style>
.container {
  width: 300px;
  background-color:#0f0;
  display: flex;
}
.left {
  width:200px;
  background-color:#f00;
}
.right {
  flex: 1;
  word-break: break-word;
  background-color:#ff0;
}
</style>

<div class="container">
    Container 300px
</div>

<div class="container">
  <div class="left">
    This text.
  </div>
  <div class="right">
    This is a prettyveryveryveryveryveryveryveryveryveryveryveryverylong word. 
  </div>
</div>

回复收藏 0 原文

~没有更多了~