Narrow the size of border and average the others border size

Question

My original design with 4 channels like this:

There are 4 borders with equal size. The code is here:

.meter-block-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  background-color:lightblue;
}

.chBorder {
  height:100%;
  width:100%;
  margin: 0.5%;
  border-radius: 1%;
}
.ch1 {
  border: solid 2px rgb(240, 240, 1);
}
.ch2 {
  border: solid 2px green;
}
.ch3 {
  border: solid 2px blue;
}
.ch4 {
  border: solid 2px purple;
}

.chTopBar{
  margin: -0.1%;
  border-radius: 1%;
  display: flex;
  flex-direction: row;
  height: 40px;
}

.chHL1{
  background-color: rgb(240, 240, 1);
}
.chHL2{
  background-color: green;
}
.chHL3{
  background-color: blue;
}
.chHL4{
  background-color: purple;
}

.OnOff{
  float: right;
  margin-top: 0.1%;
  margin-right: 0.1%;
  size: 16px;;
}

label.ChNumber{
  color: white;
  border-radius: 2% 0% 0% 0%;
  margin-top:-0.1%;
  margin-left:-0.1%;
  padding: 0.5% 5% 2% 5%;
  font-size: 1.5vw;
}

.measurement{
  background-color: darkblue;
  color: white;
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 2%;
  padding: 1% 0%;
  width: 100%;
}

.measurementValue{
  text-align: right;
  font-size: 50px;
}
.measurementUnit{
  font-size: 50px;
  text-align: left;
  padding-left: 2%;
}

<div class="meter-block-container">
 

  <div class="chBorder ch1">
    <div class="chTopBar chHL1">
      <div>
        <label class="ChNumber chHL1">1</label>
      </div>
    </div>
    
    
    <div class="measurement">
      <div class="measurementValue">
        6.000
      </div>
      <div class="measurementUnit">
        V
      </div>
      <div class="measurementValue">
        6.000
      </div>
      <div class="measurementUnit">
        A
      </div>
      <div class="measurementValue">
        6.000
      </div>
      <div class="measurementUnit">
        W
      </div>
    </div>
  
    <div class="vandcSettings">
      <div>
        <label>Voltage Setting</label><br>
        <input style="text-align:left;" size="8" value="50">
        <span >V</span>
      </div>
      <div>
        <label>Voltage Range</label><br>
        <select>
          <option value="0">5 V</option>
          <option value="1">10 V</option>
          <option value="2">15 V</option>
          </select>
      </div>
      <div>
        <label>Current Limit</label><br>
        <input style="text-align:left;" size="8" value="50">
        <span >A</span>
      </div>
      <div>
        <label>Current Range</label><br>
        <select>
          <option value="0">5 V</option>
          <option value="1">10 V</option>
          <option value="2">15 V</option>
        </select>
      </div>
    </div>
    <div class="ohterSettings">
      <div style="padding-bottom: 2%;">
        <input type="checkbox">
        <label>OVP Limit</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <input style="text-align:left;" size="8" value="50">
            <span >V</span>
          </div>
        </div>
      </div>
      <div>
        <input type="checkbox">
        <label>OCP</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <label>OVP Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
          <div>
            <label>OVP Delay Start</label><br>
            <select>
              <option value="0">CC Transition</option>
              <option value="1">Setting Change</option>
            </select>
          </div>
        </div>
      </div>
      <div style="background-color: grey;">
        <input type="checkbox">
        <label>Coupling</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <label>On Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
          <div>
            <label>Off Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
        </div>
      </div>
    </div>
  -->
    
  </div>
  <div class="chBorder ch2">
      <div class="chTopBar chHL2">
          <label class="ChNumber chHL2">2</label>
      </div>
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>   
  
  <div class="chBorder ch3">
      <div class="chTopBar chHL3">
        <label class="ChNumber chHL3">3</label>
      </div>
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
  <div class="chBorder ch4">
      <div class="chTopBar chHL4">
          <label class="ChNumber chHL4">4</label>
      </div> 
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
</div>

If one of the channels has no data, it will look like this (please ignore the background color):

This can happen to any channel and up to a maximum of three channels in no module. But it needs to narrow the no module channel and enlarge other channels'size. I tried to change the content in channel 1 to no module, but the size still the same.

I used the display:flex method to arrange those channels. Any better idea?

Answer 1

In order to fix your element spacing, use css-grid. Here's a fix for you code. I added css grid, column-gap and grid-column-gap (for support), removed a margin and replaced it by a padding on your main div.

Note for grid gaps :

CSS Grid Layout initially defined the grid-column-gap property. This prefixed property is being replaced by column-gap. However, in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property as in the second interactive example above. https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap

Without data in first element

.meter-block-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 4px;
  column-gap: 4px;
  grid-column-gap : 4px; /* See note */
  height: 100%;
  width: 100%;
  background-color:lightblue;
}

.chBorder {
  height:100%;
  border-radius: 1%;
  box-sizing: border-box; /* Make borders be taken in count in width calculation, to prevent width = 100% + borders */
}
.ch1 {
  border: solid 2px rgb(240, 240, 1);
}
.ch2 {
  border: solid 2px green;
}
.ch3 {
  border: solid 2px blue;
}
.ch4 {
  border: solid 2px purple;
}

.chTopBar{
  margin: -0.1%;
  border-radius: 1%;
  display: flex;
  flex-direction: row;
  height: 40px;
}

.chHL1{
  background-color: rgb(240, 240, 1);
}
.chHL2{
  background-color: green;
}
.chHL3{
  background-color: blue;
}
.chHL4{
  background-color: purple;
}

.OnOff{
  float: right;
  margin-top: 0.1%;
  margin-right: 0.1%;
  size: 16px;;
}

label.ChNumber{
  color: white;
  border-radius: 2% 0% 0% 0%;
  margin-top:-0.1%;
  margin-left:-0.1%;
  padding: 0.5% 5% 2% 5%;
  font-size: 1.5vw;
}

.measurement{
  background-color: darkblue;
  color: white;
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 2%;
  padding: 1% 0%;
  width: 100%;
}
.empty.meter-block-container {
  grid-template-columns: 75px repeat(3, 1fr);
}
.empty .measurement{
  height: 153px;
}
.empty .measurement span {
  transform-origin: top center;
  transform: rotate(90deg) translateX(65px);
  width: 91px;
  height: 27px;
  line-height: 25px;
}
.measurementValue{
  text-align: right;
  font-size: 50px;
}
.measurementUnit{
  font-size: 50px;
  text-align: left;
  padding-left: 2%;
}

<div class="meter-block-container empty">
 

  <div class="chBorder ch1">
    <div class="chTopBar chHL1">
      <div>
        <label class="ChNumber chHL1">1</label>
      </div>
    </div>
    
    
    <div class="measurement empty">
      <span>No data</span>
    </div>
  
    <div class="vandcSettings">
      <div>
        <label>Voltage Setting</label><br>
        <input style="text-align:left;" size="8" value="50">
        <span >V</span>
      </div>
      <div>
        <label>Voltage Range</label><br>
        <select>
          <option value="0">5 V</option>
          <option value="1">10 V</option>
          <option value="2">15 V</option>
          </select>
      </div>
      <div>
        <label>Current Limit</label><br>
        <input style="text-align:left;" size="8" value="50">
        <span >A</span>
      </div>
      <div>
        <label>Current Range</label><br>
        <select>
          <option value="0">5 V</option>
          <option value="1">10 V</option>
          <option value="2">15 V</option>
        </select>
      </div>
    </div>
    <div class="ohterSettings">
      <div style="padding-bottom: 2%;">
        <input type="checkbox">
        <label>OVP Limit</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <input style="text-align:left;" size="8" value="50">
            <span >V</span>
          </div>
        </div>
      </div>
      <div>
        <input type="checkbox">
        <label>OCP</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <label>OVP Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
          <div>
            <label>OVP Delay Start</label><br>
            <select>
              <option value="0">CC Transition</option>
              <option value="1">Setting Change</option>
            </select>
          </div>
        </div>
      </div>
      <div style="background-color: grey;">
        <input type="checkbox">
        <label>Coupling</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <label>On Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
          <div>
            <label>Off Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
        </div>
      </div>
    </div>
  -->
    
  </div>
  <div class="chBorder ch2">
      <div class="chTopBar chHL2">
          <label class="ChNumber chHL2">2</label>
      </div>
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>   
  
  <div class="chBorder ch3">
      <div class="chTopBar chHL3">
        <label class="ChNumber chHL3">3</label>
      </div>
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
  <div class="chBorder ch4">
      <div class="chTopBar chHL4">
          <label class="ChNumber chHL4">4</label>
      </div> 
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
</div>

With data

.meter-block-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 4px;
  column-gap: 4px;
  grid-column-gap : 4px; /* See note */
  height: 100%;
  width: 100%;
  background-color:lightblue;
}

.chBorder {
  height:100%;
  border-radius: 1%;
  box-sizing: border-box; /* Make borders be taken in count in width calculation, to prevent width = 100% + borders */
}
.ch1 {
  border: solid 2px rgb(240, 240, 1);
}
.ch2 {
  border: solid 2px green;
}
.ch3 {
  border: solid 2px blue;
}
.ch4 {
  border: solid 2px purple;
}

.chTopBar{
  margin: -0.1%;
  border-radius: 1%;
  display: flex;
  flex-direction: row;
  height: 40px;
}

.chHL1{
  background-color: rgb(240, 240, 1);
}
.chHL2{
  background-color: green;
}
.chHL3{
  background-color: blue;
}
.chHL4{
  background-color: purple;
}

.OnOff{
  float: right;
  margin-top: 0.1%;
  margin-right: 0.1%;
  size: 16px;;
}

label.ChNumber{
  color: white;
  border-radius: 2% 0% 0% 0%;
  margin-top:-0.1%;
  margin-left:-0.1%;
  padding: 0.5% 5% 2% 5%;
  font-size: 1.5vw;
}

.measurement{
  background-color: darkblue;
  color: white;
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 2%;
  padding: 1% 0%;
  width: 100%;
}

.measurementValue{
  text-align: right;
  font-size: 50px;
}
.measurementUnit{
  font-size: 50px;
  text-align: left;
  padding-left: 2%;
}

<div class="meter-block-container">
 

  <div class="chBorder ch1">
    <div class="chTopBar chHL1">
      <div>
        <label class="ChNumber chHL1">1</label>
      </div>
    </div>
    
    
    <div class="measurement">
      <div class="measurementValue">
        6.000
      </div>
      <div class="measurementUnit">
        V
      </div>
      <div class="measurementValue">
        6.000
      </div>
      <div class="measurementUnit">
        A
      </div>
      <div class="measurementValue">
        6.000
      </div>
      <div class="measurementUnit">
        W
      </div>
    </div>
  
    <div class="vandcSettings">
      <div>
        <label>Voltage Setting</label><br>
        <input style="text-align:left;" size="8" value="50">
        <span >V</span>
      </div>
      <div>
        <label>Voltage Range</label><br>
        <select>
          <option value="0">5 V</option>
          <option value="1">10 V</option>
          <option value="2">15 V</option>
          </select>
      </div>
      <div>
        <label>Current Limit</label><br>
        <input style="text-align:left;" size="8" value="50">
        <span >A</span>
      </div>
      <div>
        <label>Current Range</label><br>
        <select>
          <option value="0">5 V</option>
          <option value="1">10 V</option>
          <option value="2">15 V</option>
        </select>
      </div>
    </div>
    <div class="ohterSettings">
      <div style="padding-bottom: 2%;">
        <input type="checkbox">
        <label>OVP Limit</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <input style="text-align:left;" size="8" value="50">
            <span >V</span>
          </div>
        </div>
      </div>
      <div>
        <input type="checkbox">
        <label>OCP</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <label>OVP Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
          <div>
            <label>OVP Delay Start</label><br>
            <select>
              <option value="0">CC Transition</option>
              <option value="1">Setting Change</option>
            </select>
          </div>
        </div>
      </div>
      <div style="background-color: grey;">
        <input type="checkbox">
        <label>Coupling</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <label>On Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
          <div>
            <label>Off Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
        </div>
      </div>
    </div>
  -->
    
  </div>
  <div class="chBorder ch2">
      <div class="chTopBar chHL2">
          <label class="ChNumber chHL2">2</label>
      </div>
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>   
  
  <div class="chBorder ch3">
      <div class="chTopBar chHL3">
        <label class="ChNumber chHL3">3</label>
      </div>
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
  <div class="chBorder ch4">
      <div class="chTopBar chHL4">
          <label class="ChNumber chHL4">4</label>
      </div> 
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
</div>

Answer 2

I think that I've achieved what you want by changing the width of .chBorder to auto and adding to it flex-grow: 1.

If you want the "cards" with no data to shrink completely you should add to their border: flex-grow: 0 flex-shrink: 1

.meter-block-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  background-color:lightblue;
}

.chBorder {
  height:100%;
  width:auto;
  margin: 0.5%;
  border-radius: 1%;
  flex-grow: 1;
}
.ch1 {
  border: solid 2px rgb(240, 240, 1);
  flex-grow: 0;
  flex-shrink:1;
}
.ch2 {
  border: solid 2px green;
}
.ch3 {
  border: solid 2px blue;
}
.ch4 {
  border: solid 2px purple;
}

.chTopBar{
  margin: -0.1%;
  border-radius: 1%;
  display: flex;
  flex-direction: row;
  height: 40px;
}

.chHL1{
  background-color: rgb(240, 240, 1);
}
.chHL2{
  background-color: green;
}
.chHL3{
  background-color: blue;
}
.chHL4{
  background-color: purple;
}

.OnOff{
  float: right;
  margin-top: 0.1%;
  margin-right: 0.1%;
  size: 16px;;
}

label.ChNumber{
  color: white;
  border-radius: 2% 0% 0% 0%;
  margin-top:-0.1%;
  margin-left:-0.1%;
  padding: 0.5% 5% 2% 5%;
  font-size: 1.5vw;
}

.measurement{
  background-color: darkblue;
  color: white;
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 2%;
  padding: 1% 0%;
  width: 100%;
}

.measurementValue{
  text-align: right;
  font-size: 50px;
}
.mea

<div class="meter-block-container">
 

  <div class="chBorder ch1">
    <div class="chTopBar chHL1">
      <div>
        <label class="ChNumber chHL1">1</label>
      </div>
    </div>
    
    
    <div class="measurement">
<!--       <div class="measurementValue">
        6.000
      </div>
      <div class="measurementUnit">
        V
      </div>
      <div class="measurementValue">
        6.000
      </div>
      <div class="measurementUnit">
        A
      </div>
      <div class="measurementValue">
        6.000
      </div>
      <div class="measurementUnit">
        W
      </div> -->
    </div>
  
<!--     <div class="vandcSettings">
      <div>
        <label>Voltage Setting</label><br>
        <input style="text-align:left;" size="8" value="50">
        <span >V</span>
      </div>
      <div>
        <label>Voltage Range</label><br>
        <select>
          <option value="0">5 V</option>
          <option value="1">10 V</option>
          <option value="2">15 V</option>
          </select>
      </div>
      <div>
        <label>Current Limit</label><br>
        <input style="text-align:left;" size="8" value="50">
        <span >A</span>
      </div>
      <div>
        <label>Current Range</label><br>
        <select>
          <option value="0">5 V</option>
          <option value="1">10 V</option>
          <option value="2">15 V</option>
        </select>
      </div>
    </div>
    <div class="ohterSettings">
      <div style="padding-bottom: 2%;">
        <input type="checkbox">
        <label>OVP Limit</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <input style="text-align:left;" size="8" value="50">
            <span >V</span>
          </div>
        </div>
      </div>
      <div>
        <input type="checkbox">
        <label>OCP</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <label>OVP Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
          <div>
            <label>OVP Delay Start</label><br>
            <select>
              <option value="0">CC Transition</option>
              <option value="1">Setting Change</option>
            </select>
          </div>
        </div>
      </div>
      <div style="background-color: grey;">
        <input type="checkbox">
        <label>Coupling</label><br>
        <div class="twoColumnSetting">
          <div class="column1Setting">
            <label>On Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
          <div>
            <label>Off Delay</label><br>
            <input style="text-align:left;" size="8" value="50">
            <span >S</span>
          </div>
        </div>
      </div>
    </div> -->
No Data
  </div>
  <div class="chBorder ch2">
      <div class="chTopBar chHL2">
          <label class="ChNumber chHL2">2</label>
      </div>
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>   
  
  <div class="chBorder ch3">
      <div class="chTopBar chHL3">
        <label class="ChNumber chHL3">3</label>
      </div>
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
  <div class="chBorder ch4">
      <div class="chTopBar chHL4">
          <label class="ChNumber chHL4">4</label>
      </div> 
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
</div>