Is it possible to do the following without JS ? There are two div'a arranged in a row, one takes the width of the content, which may be different with each load, the second - rubber and takes up the rest of the width to the border of the parent unit. Google gives solutions only for cases when the size of the first div'a fixed.

    2 answers 2

    For example, using display: flex on the parent, flex: none on the first div and flex: 1 on the second div:

     .parent { display: flex; } .first { flex: none; } .second { flex: 1; background: teal; } 
     <div class="parent"> <div class="first">Текст нефиксированного размера</div> <div class="second"></div> </div>

    • Thanks It works. And if I need to arrange several such lines one under another? Something does not work. - Artem Svistula
    • @ArtyomSvistula several such lines one below the other, are you the .parent block duplicated? It seems to be working - diraria
    • And in one parent'e they can not be separated? - Artem Svistula
    • @ArtyomSvistula I think it is possible, but it’s not very clear exactly how it should be, so I think it’s better to ask a separate question about it - diraria

    It is possible so:

     .wrapper { border: 1px solid #000; width: 400px; height: 200px; display: grid; grid-template-columns: min-content minmax(min-content, 1fr); } .a { border: 1px solid #000; } 
     <div class="wrapper"> <div class="a a1">Какой-то длинный текст</div> <div class="a a2">Текст</div> </div>