Line Clamping (Cross-Browser, Pure CSS)

.html

<p class="line-clamp line-clamp-2">This is a cross-browser (pure CSS) solution that will clamp text to X number of lines with a trailing ellipsis in Webkit browsers. The `height` property is used on other browsers (along with a fading text effect) as a graceful fallback in non-Webkit browsers. The use of CSS `calc` allows for any font-size to work properly; i.e. you don't need a fixed height or a fixed font size for this to work! Play with it :-) You can change the second class to `line-clamp-[1|2|3|4|5]` and experiment with this just a little.</p>

.scss

body, html{
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  margin: 0; 
  padding: 0
}

body{
  
}

.pai{ 
  display: flex;
  width: 100%;
  flex-direction: row
}

.filhoA{
   display: flex;
   background: #00ff0030;
  width: 200px;
  min-width: 200px;
}
.filhoB{
  width: 100%;
  display: flex;
  flex-direction: row;
  width: 100%;
  background: #ff000030;
  padding: 10px;
  position:relative;

  .neto1{ 
    flex: 0 1 calc(100% - 300px);
    
    padding: 10px;
    max-width: 100%;
    background: #0000ff30; 
    position: relative;
  }
  .netoclone{}
  .neto2{  
    flex: 0 0 300px;
    padding: 10px;
    max-width: 300px;
    background: #0000ff20;
    right: 0;
    position: relative;
    div{
      transition: all 0.2s linear;
      position: absolute; 
      right: 0px;
      top: 0;
      background: red;
      height: 100%;
      width:  300px;
     // width: calc(100vw - 220px);
      overflow-y: hidden;
    }
  } 

}