CSS Flexbox width widthout overflow 100%

Question

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

Use "word-break: break-word;" to wrap the text. Once you wrap the text, the yellow box will fit in the container. — jiya ranka, Jun 06 '22 at 11:13

score 1 · Accepted Answer · answered Jun 06 '22 at 11:11

<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>

CSS Flexbox width widthout overflow 100%

1 Answers1