-1

I have a flex layout as created in here - https://jsfiddle.net/7t1m0gL2/13/

The problem being, the long text goes beyond its parent to occupy further space even if overflow: hidden etc. are provided. 

.left {
  width: 40%;
  background-color: cyan;
  height: 50px;
  padding: 5px 0; 
}

.profile {
  padding: 5px 0;  
  display: flex;
  flex-direction: row;
}  


.image {
  height: 40px;
  width: 40px;
  margin-right: 5px;
  background-color: orange;
}  
      
.text {
  display: flex;
  flex-direction: column;
}
      
.name {
  color: red;
}

.description {
  color: blue;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
<div class="master">
  <div class="left">
    <div class="profile">
      <div class="image">
      </div>
      <div class="text">
        <div class="name">
          Some short name
        </div>
        <div class="description">
          Some very long description that's most likely to overflow here
        </div>
      </div>
    </div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
upInCloud
  • 979
  • 2
  • 10
  • 29
  • Add `min-width: 0` to `.text`: https://jsfiddle.net/7t1m0gL2/25/ – Michael Benjamin Mar 27 '18 at 15:42
  • overflow:hidden should be set on the flex parent , since you are using flex, the parent is holding the content, and children are just layed in it and can overflow. (duplicate linked tells you about it) – G-Cyrillus Mar 27 '18 at 15:43

1 Answers1

-1

You need to add a class of overflow: hidden to your .text element. The inner element is not aware of the width of its parent, therefore you need to set the overflow property on the element containing the element that needs to be truncated.

.left {
  width: 40%;
  background-color: cyan;
  height: 50px;
  padding: 5px 0; 
}

.profile {
  padding: 5px 0;  
  display: flex;
  flex-direction: row;
}  


.image {
  height: 40px;
  width: 40px;
  margin-right: 5px;
  background-color: orange;
}  
      
.text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
      
.name {
  color: red;
}

.description {
  color: blue;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
<div class="master">
  <div class="left">
    <div class="profile">
      <div class="image">
      </div>
      <div class="text">
        <div class="name">
          Some short name
        </div>
        <div class="description">
          Some very long description that's most likely to overflow here
        </div>
      </div>
    </div>
  </div>
</div>
Ally Rippley
  • 525
  • 2
  • 6