1

Hoping some one can help me, I'm trying to create a split view display, with the left half of the screen been full height and the right hand side been split into quarters. In the Left column there will be rows of text split into columns, each column should have the content truncated if exceeds width of column, the same effect should be in the 4 quarters on the right hand side. Whatever I seem to do the quarters grow in width if the content overflows. here is my primitive code...

<!DOCTYPE html>
<html>

<head>
  <title>"Active Work</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      min-height: 100vh;
      flex-direction: row;
      margin: 0;
    }
    
    .container {
      width: 100%;
      background: #D7E8D4;
      display: flex;
      min-height: 100vh;
      flex-direction: row;
      margin: 0;
    }
    
    .colLeft {
      width: 50%;
      background: blue;
      min-height: 100vh;
    }
    
    .colRight {
      width: 50%;
      background: green;
      min-height: 100vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .grid {
      height: 50vh;
      flex: 0 0 50%;
    }
    
    .rowFlex {
      display: flex;
      flex-direction: row;
      line-height: 36px;
    }
    
    .btn1 {
      padding: 5px;
      background-color: #00796b;
      border-radius: 5px;
      max-height: 30px;
      margin: 0px 5px;
    }
    
    .gridHeader {
      width: 100%;
    }
    
    .truncate {
      overflow: hidden;
      white-space: nowrap;
      flex-wrap: nowrap;
      flex: 0 0 50%;
      background-color: yellow;
      text-overflow: ellipsis;
    }
    
    .spanDiv {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="colLeft">

      <div class="rowFlex">
        <div>Some Text</div>
        <div class="btn1">G1</div>
        <div class="btn1">G2</div>
        <div class="btn1">G3</div>
        <div class="btn1">G4</div>

      </div>

    </div>

    <div class="colRight">
      <div class="grid" style="background-color:#ff8a80;">
        <div class="rowFlex">
          <div class="gridHeader">GROUP1</div>
        </div>
        <div class="rowFlex">
          <div class="truncate">LCT-56477</div>
          <div class="truncate"><span class="spanDiv">LCT-5647 cvvfvdfgdfgdfgdfgfdvhjghjghjghfvfvfv7-</span></div>
        </div>


      </div>
      <div class="grid" style="background-color:#7b1fa2;">2</div>
      <div class="grid" style="background-color:#64b5f6;">3</div>
      <div class="grid" style="background-color:#80cbc4;">4</div>

    </div>


  </div>
</body>

</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Mike Todd
  • 71
  • 1
  • 2
  • 5

1 Answers1

1

Just add min-width:0 to your .grid class.

* {
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  margin: 0;
}

.container {
  width: 100%;
  background: #D7E8D4;
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  margin: 0;
}

.colLeft {
  width: 50%;
  background: blue;
  min-height: 100vh;
}

.colRight {
  width: 50%;
  background: green;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.grid {
  height: 50vh;
  flex: 0 0 50%;
  min-width: 0;
}

.rowFlex {
  display: flex;
  flex-direction: row;
  line-height: 36px;
}

.btn1 {
  padding: 5px;
  background-color: #00796b;
  border-radius: 5px;
  max-height: 30px;
  margin: 0px 5px;
}

.gridHeader {
  width: 100%;
}

.truncate {
  overflow: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
  flex: 0 0 50%;
  background-color: yellow;
  text-overflow: ellipsis;
}

.spanDiv {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
<div class="container">
  <div class="colLeft">

    <div class="rowFlex">
      <div>Some Text</div>
      <div class="btn1">G1</div>
      <div class="btn1">G2</div>
      <div class="btn1">G3</div>
      <div class="btn1">G4</div>

    </div>

  </div>

  <div class="colRight">
    <div class="grid" style="background-color:#ff8a80;">
      <div class="rowFlex">
        <div class="gridHeader">GROUP1</div>
      </div>
      <div class="rowFlex">
        <div class="truncate">LCT-56477</div>
        <div class="truncate"><span class="spanDiv">LCT-5647 cvvfvdfgdfgdfgdfgfdvhjghjghjghfvfvfv7-</span></div>
      </div>


    </div>
    <div class="grid" style="background-color:#7b1fa2;">2</div>
    <div class="grid" style="background-color:#64b5f6;">3</div>
    <div class="grid" style="background-color:#80cbc4;">4</div>

  </div>


</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161