There is a flexible block with three nested blocks.

div{ height: 20px; } .container{ display: flex; justify-content: space-around; background: gray; } .d1 {background: red;} .d2 {background: green;} .d3 {background: blue;} 
 <div class="container"> <div class="d1">ВСкст</div> <div class="d2">Π”Π»ΠΈΠ½Π½Ρ‹ΠΉ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ тСкст</div> <div class="d3">Π”Π»ΠΈΠ½Π½Ρ‹ΠΉ тСкст</div> </div>

How to make equal indents from all sides? All gray pieces should be the same length, and not depend on the length of nested blocks.
This simple question baffled me.

    2 answers 2

    I bow to the fact that this is a crutch, but nothing better is thought up.

    Remove indents at the edges ( space-between instead of space-around ) and insert 2 more pseudo-elements to get a full indent near them, not half at the edges:

     div { height: 20px; } .container { display: flex; justify-content: space-between; background: gray; } .container:before, .container:after { content: ""; } .d1 { background: red; } .d2 { background: green; } .d3 { background: blue; } 
     <div class="container"> <div class="d1">ВСкст</div> <div class="d2">Π”Π»ΠΈΠ½Π½Ρ‹ΠΉ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ тСкст</div> <div class="d3">Π”Π»ΠΈΠ½Π½Ρ‹ΠΉ тСкст</div> </div>

    • This is a crutch of course, but the main thing that works :) - Yuri
    • Sly :). Thanks - user200141

    A new space-evenly value has space-evenly , although browser support is still so-so - supported in Chrome 60+, FF 52+; not supported in IE and Edge.

     div { height: 20px; } .container { display: flex; justify-content: space-evenly; background: gray; } .d1 { background: red; } .d2 { background: green; } .d3 { background: blue; } 
     <div class="container"> <div class="d1">ВСкст</div> <div class="d2">Π”Π»ΠΈΠ½Π½Ρ‹ΠΉ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ тСкст</div> <div class="d3">Π”Π»ΠΈΠ½Π½Ρ‹ΠΉ тСкст</div> </div>