Andry Andry - 4 months ago 9
HTML Question

Overflow not working when in double flex container

I have a component which consists of a text next to a button. The text must shrink and get cut if no much space is available. Like this:



.container .box {
background-color: #efefef;
padding: 5px;
border: 1px solid #666666;
flex: 0 0 auto;
}

.container .text {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.container {
display: flex;
}

<div class="container">
<div class="text">This is a text that is supposed to get truncated properly when needed.</div>
<div class="box">Hello</div>
</div>





Important To see it working, maximize the snippet and shrink the browser window in order to see the text truncate

And it works fine as you can see.

Inside another flex container



The problem comes when I try to put this component inside another flex container.

My page consists of a side area, fixed, and the remaining part on the right which adjust to the space left. My component must fit into this second part, so I put it there:



.container .box {
background-color: #efefef;
padding: 5px;
border: 1px solid #666666;
flex: 0 0 auto;
}

.container .text {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.container {
display: flex;
}

.main {
display: flex;
}

.main .side {
width: 100px;
background-color: #ff9900;
flex: 0 0 auto;
}

.main .content {
flex: 1 1 auto;
}

<div class="main">
<div class="side"></div>
<div class="content">
<div class="container">
<div class="text">This is a text that is supposed to get truncated properly when needed.</div>
<div class="box">Hello</div>
</div>
</div>
</div>





In the second case, the text does not shrink. I am using Chrome but it looks like a problem also in other browsers.

Answer

Use width property to work with overflow

Note: Width should be in px

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}
.container .text {
  flex: 1 1 auto;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container {
  display: flex;
}
.main {
  display: flex;
}
.main .side {
  width: 100px;
  background-color: #ff9900;
  flex: 0 0 auto;
}
.main .content {
  flex: 1 1 auto;
}
<div class="main">
  <div class="side"></div>
  <div class="content">
    <div class="container">
      <div class="text">This is a text that is supposed to get truncated properly when ndgsdgeeded.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>