Տարբեր լայնության տարրեր և ֆլեքս բլոկների սեղմելիությունը CSS-ում

Ենթադրենք, հիմա մեր տարրերն ունեն տարբեր լայնություն: Այս դեպքում կտրվող կտորը կլինի համամասնական այդ տարրի լայնությանը և կհաշվարկվի հետևյալ բանաձևով. բացասական ազատ տարածություն * (տարրի լայնություն / բոլոր տարրերի լայնությունների գումար):

Ենթադրենք, մենք ունենք 4 տարր: Ենթադրենք առաջին տարրի լայնությունը հավասար է 400px, մնացած տարրերի լայնությունը - 200px, իսկ ծնողի լայնությունը 900px:

Տարրերի ընդհանուր լայնությունը հավասար է.

Այդ դեպքում բացասական ազատ տարածությունը կլինի հավասար.

Գտնենք, թե որքան կկտրվի առաջին տարրից.

Այսինքն նրա լայնությունը կլինի հավասար.

Գտնենք, թե որքան կկտրվի մնացած յուրաքանչյուր տարրից.

Այսինքն այս տարրերի լայնությունը կլինի հավասար.

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 300px;
}
.elem2 {
  width: 100px;
}
.elem3 {
  width: 100px;
}