Как сделать так, чтобы ребенок Div A перекрывал своего родного брата, Div B?

Question

ОБНОВЛЕННАЯ СКИДКА

У меня есть таблица, которая показывает некоторый контент на основе входных данных фильтра, и я недавно изменил тег выбора для пользовательского ввода, который выполняет поиск среди предыдущих возможностей выбора (очень похоже на список данных) и отображает их в раскрывающемся списке.

Но, к сожалению, выпадающий список, который я создал с помощью ввода, не перекрывает таблицу, делая его слишком маленьким (отображая только 2 строки, когда должен показать немного больше для целей эстетики c).

Упрощенная скрипка ниже представляет мою проблему:

https://jsfiddle.net/ozmLfk7r/

В этом fiddle, div «response» должен быть выше всего div «table», как и опции в теге select.

• Я пытался зафиксировать положение div «response» фиксированным, но X-scroll (что необходимо в моем реальном случае использования) смещает его по тегу ввода.

Что мне делать в этом случае? (Javascript ответы приветствуются, но предпочтительнее чистый CSS или SASS / S CSS!)

.filter {
  display: flex;
  flex-direction: row;
  height: 50px;
  background-color: #ddd;
  overflow-x: scroll;
  overflow-y: hidden;
}
.filter > .actualFilter {
  width: 150px;
}
.filter > .actualFilter > .response {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  max-height: 100px;
}
.table {
  border: 2px solid #666;
  display: flex;
  flex-direction: column;
}

<div class="filter">
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
    </div>
  </div>
  <div class="actualFilter">
    <select>
      <option>Click me</option>
      <option>This Overlaps the table!</option>
      <option>This Overlaps the table!</option>
      <option>This Overlaps the table!</option>
      <option>This Overlaps the table!</option>
      <option>This Overlaps the table!</option>
    </select>
  </div>
</div>
<div class="table">
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
</div>

Answer 1

.filter {
  display: flex;
  flex-direction: row;
  height: 50px;
  background-color: #ddd;
  overflow-x: scroll;
  overflow-y: hidden;
}
.filter > .actualFilter {
  width: 150px;
}
.filter > .actualFilter > .response {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  max-height: 100px;
}
.table {
  border: 2px solid #666;
  display: flex;
  overflow-x: auto;
}

.table span {
  flex-shrink: 0;
  flex-basis: 150px;
}


    <div class="filter">
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
</div>
<div class="table">
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
</div>

Вот демоверсия .