Как растянуть группу блоков по ширине?

Question

[zlodiak]

Есть блок, который содержит три внутренних блока. Одному из внутренних блоков я устанавливаю ширину чуть больше чем у остальных.

LIVE DEMO

Но ширина остальных внутренних блоков остаётся прежней. А я хотел бы чтобы всегда ширина всех внутренних блоков была одинаковой. То есть заполняла родительский блок полностью. Как это сделать?

Важно сохранить наличие горизонтального скролла.

<div class="wrap">
  <div class="table">
    <div class="level level1">1</div>
    <div class="level level2">2</div>
    <div class="level level3">3</div>
  </div>
</div>

.wrap {
  margin: 0 auto;
  width: 400px;
  background: red;
}

.table {
  width: 100%;
  background: yellow;
  overflow-x: auto;

}

.level {
  background: lime;
  height: 40px;
  
  
}

  .level1 {
    background: magenta;
    width: 600px;
  }
  
  .level2 {
    background: green;
    width: 100%;
  }
  
  .level3 {
    background: blue;
    width: 100%;
  }

Answer 1

[inzeppelin]

Сложно понять, но возможно вы хотите так:

.wrap {
  margin: 0 auto;
  width: 400px;
  background: red;
  overflow-x: auto; // скролл уводим наверх
}

.table {
  background: yellow;
  display: inline-block; // блок шириной по содержимому
}

остальное без изменений

LIVE

Comments

[zlodiak]

Скомканно я объяснил, но в общем ваше решение верное и мне помогло. Вот конечный вариант, если интересно:

<div class="wrap">
  <div class="table">
    <div class="level level1">111111111111111111111111111111111111111111111111111111112222233333</div>
    <div class="level level2">2</div>
    <div class="level level3">3</div>
  </div>
</div>

.wrap {
  margin: 0 auto;
  max-width: 400px;
  width: 100%;
  background: red;
  overflow-x: auto;
}

.table {
  background: yellow;
  display: inline-block;
}

.level {
  background: lime;
  height: 40px;
  width: 100%;
}

  .level1 {
    background: magenta;
  }
  
  .level2 {
    background: green;
  }
  
  .level3 {
    background: blue;
  }