How to make a div fill a remaining horizontal space?

Question

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to f

Answer 1

Rules for items and containers;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Use white-space: nowrap; for texts in last items for their undestructuring.

Item X% | Item Y% | Item Z%

Total length always = 100%!

if

Item X=50%
Item Y=10%
Item z=20%

then

Item X=70%

Item X is dominant (first items are dominant in table CSS layout)!

Try max-content; property for div inside for spreading div in container:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}