How to keep a flexbox from expanding horizontally

March 22, 2023

I have been all over the net, tried many solutions, none of which work. I have a container that will house several rows (like a data grid). The row is defined in the following manner:

.container{
  width: 500px;
  height: 300px;
  border: 2px solid 
}
.row{
  width: 100%;
  height: 48px;
  background-color: dodgerblue;
  display: flex;  
  align-items:center;
}
.row-left{
  width: 60px;
  display: flex;  
  height: 100%;
  background-color: red;
}
.row-middle{
  flex:1 0 0;  
  background-color: green;
}
.row-right{
  width: 100px;
  height: 100%;
  background-color: yellow;
}
.subject{
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="container">
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I am supposed to look like.
      </div>
    </div>
    <div class="row-right">X</div>
  </div>
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I look like when my text is too long.  How can we possibly fix this to hide the overflow and ellipses the text?
      </div>
    </div>
    <div class="row-right">X</div>
  </div>  
</div>

I need to keep row-middle a static size and handle the text overflow with ellipses. ANY Help would be much appreciated.

>Solution :

You can use line-clamp property

.container{
  width: 500px;
  height: 300px;
  border: 2px solid 
}
.row{
  width: 100%;
  height: 48px;
  background-color: dodgerblue;
  display: flex;  
  align-items:center;
}
.row-left{
  width: 60px;
  display: flex;  
  height: 100%;
  background-color: red;
}
.row-middle{
  flex:1 0 0;  
  background-color: green;
}
.row-right{
  width: 100px;
  height: 100%;
  background-color: yellow;
}
.subject{
  width: 100%;
  height: 100%;
   display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

<div class="container">
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I am supposed to look like.
      </div>
    </div>
    <div class="row-right">X</div>
  </div>
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I look like when my text is too long.  How can we possibly fix this to hide the overflow and ellipses the text?
      </div>
    </div>
    <div class="row-right">X</div>
  </div>  
</div>

You can read more about it over here