Сделать DIV заполнить оставшуюся ширину, не изменяя порядок элементов

Question

Мой вопрос такой же, как этот: make a div fill up the remaining width

Но я не хочу, чтобы изменить порядок дивы.

В моем конкретном случае, я хотел бы иметь:

div float: left; width: 100% - 500px; (i.e. this should take up all the remaining space) 
div float: right; width: 250px; 
div float: right; width: 250px; 

я могу сделать эту работу, если я изменить порядок дивы, но я не хочу, чтобы сделать это, так как на мобильных устройствах Я хотел бы сделать ширину всех divs 100%, и порядок должен оставаться. Есть ли способ сделать это? Является ли flexbox единственным решением?

Answer 1

Просто используйте calc(). Каждый раз, когда родительский div изменяет размер, обновляется 100%, и так будет calc(). Это означает, что он также должен быть полностью реагирующим.

.my-div { 
    width: calc(100% - 500px); 
} 

Answer 2

попробуйте следующее, оно также отзывчивое!

.w-250{ 
 
    width: 250px; 
 
    height: 75px; 
 
    
 
    float: right; 
 
    border: 1px solid red; 
 
} 
 
#r-boxer{ 
 
    overflow: hidden; 
 
} 
 
#r-elem{ 
 
    width: 99%; 
 
    height: 75px; 
 
    
 
    border: 1px solid blue; 
 
}

<div id="container"> 
 
    <div class="w-250">Width 250px;</div> 
 
    <div class="w-250">Width 250px;</div> 
 
    <div id="r-boxer"><div id="r-elem">Remaining Space</div></div> 
 
</div>