how to make div take up the rest of the space without overflowing?

Question

I have 2 divs side by side where the red one take up the remaining space
but it overflows when the inside elements are too long like this:

#wrapper{
 width:50%;
display:flex;
height:10rem;
background-color:yellow;
}

#wrapper div{
height:5rem;
}

.second {
  flex: 1;
}

<div id="wrapper">
  <div style="background: blue">short version</div>
  <div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div>
</div>

I tried overflow-wrap: anywhere; but there are browser compatibility issues plus how do I get it to ellipsis if overflowing at the bottom?

Preferably to look like this:

E-telier · Answer 1 · 2021-12-02T16:32:53.517

0

Are you looking for the value break-word of overflow-wrap ?

The compatibility is good between browser, except for IE of course.

.example {
  overflow-wrap: break-word;
}

Edit : Flexbox need min-width:0; for overflow-wrap to work (see here).

Here is the full working code :

<html>
    <head>
        <style>
            #wrapper{
                width:50%;
                display:flex;
                height:10rem;
                background-color:yellow;
            }

            #wrapper div{
                height:5rem;
            }

            #wrapper div.second {
                flex: 1;
                overflow-wrap: break-word; /* breaks long words */
                min-width: 0; /* necessary for flexbox */
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
          <div style="background: blue">short version</div>
          <div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div>
        </div>
    </body>
</html>

edited Dec 02 '21 at 16:32

answered Dec 02 '21 at 15:31

E-telier

766
5
15

could you add some code? – Dec 02 '21 at 15:32
Here is how to code the CSS part : .example { overflow-wrap: break-word; } – E-telier Dec 02 '21 at 15:34
I tried it, it's not working in the example I've given – Dec 02 '21 at 15:36
2

For flexbox you need to add a min-width:0; for the overflow-wrap to work – E-telier Dec 02 '21 at 16:31
looks good! but is it possible to add ellipsis to the ending? – Dec 02 '21 at 16:36
For multiline ellipsis you'll need to use Javascript. There are multiple examples on Stackoverflow (https://stackoverflow.com/questions/3404508/cross-browser-multi-line-text-overflow-with-ellipsis-appended-within-a-fixed-wid) – E-telier Dec 02 '21 at 16:44

score 0 · Answer 2 · answered Dec 02 '21 at 16:40

You can use overflow: hidden; in css like so :

#wrapper {
    overflow: hidden;
}

Here is the full code :

#wrapper {
  width: 50%;
  display: flex;
  height: 10rem;
  background-color: yellow;
  overflow: hidden;
}

#wrapper div {
  height: 5rem;
}

.second {
  flex: 1;
}

<div id="wrapper">
  <div style="background: blue">short version</div>
  <div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div>
</div>

SergeiMinaev · Accepted Answer · 2021-12-02T17:32:58.960

overflow-wrap: break-word; min-width:0; will work. Another way is to use word-break: break-all: https://codepen.io/SergeiMinaev/pen/MWEwvre .

I've also added ellipsis to this example. One thing about ellipsis: the number of the line to which the '...' will be added must be hardcoded, so you'll have to specify fixed height of the container.

UPD: added the code:

#wrapper {
  width:300px;
  display:flex;
  height:10rem;
  background-color:yellow;
}
#wrapper div {
  height:4rem;
  /* correct line height is required */
  line-height: 1rem;
}

.second {
  flex: 1;
  word-break: break-all; 
  display: -webkit-box;
  /* maximum number of lines should be hardcoded, sadly */
  -webkit-line-clamp: 4; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div id="wrapper">
  <div style="background: blue">short version</div>
  <div class="second" style="background:red;">
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version
  </div>
</div>

perfect exactly what I was looking for, could you just add the code in your answer? — , Dec 02 '21 at 17:25

how to make div take up the rest of the space without overflowing?

3 Answers3