There is a block. It should be divided into two. One 30px, another auto.

<div> <div class="left"> </div> <div class="right"> </div> </div>

I solved the problem like this:

 <table style="height: 100%; width: 100%; border-collapse: collapse; table-layout: fixed;"> <tr> <td style="width: auto; background-color: #abc">hвавфыавправi</td> <td style="width: 30px; background-color: #def">hii</td> </tr> </table>

It is interesting to see without tables.

    3 answers 3

    Solution based on floating blocks. 1st unit - 30px. The second one takes up all the remaining space, since it is a div (display: block;)

     <div> <div style="float:left; width:30px; background-color:pink">h</div> <div style="background-color:olive">text</div> </div>

    • Yes, what you need. - Tima

    flex:

     .right { width: 30px; flex-basis: 30px; flex-shrink: 0; background: red; } .left { flex-basis: 100%; flex-shrink: 1; background: #ccc; } .wrap { display: flex; align-items: stretch; justify-content: space-between; } 
     <div class="wrap"> <div class="left"> Left </div> <div class="right"> </div> </div> 

       <table style="height: 100%; width: 100%; border-collapse: collapse; table-layout: fixed;"> <tr> <td style="width: calc(100% - 30px); background-color: #abc">hвавфыавправi</td> <td style="width: 30px; background-color: #def">hii</td> </tr> </table>

      • Why not 100% - 30px, but 100% -30%? - Air
      • for a table, it is enough to specify the width for only one column, the other column will occupy the rest of the width jsfiddle.net/wLbe8wea/1 - soledar10
      • Sorry, typo corrected - larrymacbarry