Что делать помимо FLEXBOX, чтобы разместить растягиваемый элемент между двумя элементами фиксированного размера в одной строке на веб-сайте?

В IE8 вы можете рассматривать таблицы, но старый способ сделать это - использовать числа с плавающей запятой.

#wrapper {
  overflow: hidden; /* Establish BFC */
}
#child1 {
  float: left;
  width: 200px;
  background: yellow;
}
#child3 {
  float: right;
  width: 150px;
  background: pink;
}
#child2 {
  overflow: hidden; /* Establish BFC */
  background: cyan;
}

<div id="wrapper">
  <div id="child1">Child 1</div>
  <div id="child3">Child 3</div>
  <div id="child2">Child 2</div>
</div>

Чтобы применить одну строку, вы можете добавить набор max-width процентов к #child1 и #child2, которые в сумме дают 100%.

Я не совсем понимаю проблему, с которой вы столкнулись при попытке использовать таблицы. Не могли бы вы объяснить, в чем была проблема?

Вы можете попробовать использовать div и CSS для создания отображения в виде таблицы. Таким образом, вы можете, например, использовать запросы функций, чтобы узнать, доступен ли flexbox, и использовать его. Если нет, вы можете вернуться к использованию таблицы CSS ниже. И все это без изменения HTML.

Сообщите мне, работает ли это для вас!

#container{
  display: table;

  /* use table-layout: fixed if you're 
     having problems with the content expanding 
     the fixed cells */
  /* table-layout: fixed; */

  width: 100%; /* or however big you need it */
}

  #row{
    display: table-row;
  }

    #one,
    #two,
    #three{
      display: table-cell;
    }

  #one{
    width: 100px;
    background: blue;
  }
  #two{
    width: auto;
    background: red;
  }
  #three{
    width: 100px;
    background: orange;
  }

<div id="container">
  <div id="row">
    <div id="one">Div 1</div>
    <div id="two">Div 2</div>
    <div id="three">Div 3</div>
  </div>
</div>

Ну, flexbox был создан специально, чтобы предоставить CSS способ делать то, что вы описываете, так что это немного похоже на вопрос, как найти площадь квадрата без умножения ...

До использования flexbox моим основным решением для такого рода проблем было использование JavaScript для динамического изменения размера соответствующего div (второго дочернего элемента в вашем случае). Мне действительно не нравилось это решение даже тогда, потому что я не думаю, что JavaScript - хорошее место для логики макета, но это было лучшее, что я мог придумать.

Я полагаю, вы могли бы использовать таблицу, но я думаю, что тогда вы столкнетесь с причудливыми ограничениями в компоновке внутри «ячеек».

Вот одно решение, но оно имеет ограничения. Вы должны знать ширину дочернего элемента 3 и позиционировать родительский div относительно.

https://jsfiddle.net/whatisthebigpicture/sj9xv9m6/1/

header {
  position: relative;
}
div {
  outline: 1px solid red;
}
.div1 {
  width: 100px;
  float: left;
}
.div2 {
  margin-right: 100px;
}
.div3 {
  width: 100px;
  top: 0;
  right: 0;
  position: absolute;
}