Сделать ширину диапазона до плавающих кнопок

Question

Итак, в моем макете у меня будет основная панель поиска вместе с двумя кнопками.

Чуть ниже находятся различные записи. Какой из них имеет интерактивный заголовок, чтобы показать его содержимое и кнопки открытия / закрытия.

Вот JSfiddle MVE (только с двумя записями).

Поскольку заголовки доступны для нажатия Я хочу, чтобы они занимали все оставшееся пространство до плавающих кнопок.

I've tried adding two options to .entry_title:

.entry_title {
   display: inline;
   width: 100%;
}

But this way the title will actually occupy a whole line (thus moving the buttons to the next one). I've also tried all the other display options.

I've tried solutions to other answers ( ссылка , ссылка ), но не смог заставить их работать в моей настройке .

Answer 1

Попробуйте изменить свой .entry_bar css на это:

.entry_bar {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
}

Я не рекомендую заглядывать в сетку CSS. Вот отличное руководство от css -tricks CSS -Grid Guide

Answer 2

Пропустите поплавки и используйте гибкий бокс. Просто добавьте display:flex; в .entry-bar и flex-grow:1; в .entry-title;

.entry_bar {
  display:flex;
}

.entry_title {
    background-color: green;
    user-select: none;
    flex-grow:1;
}

Answer 3

Можно использовать flex-box

.entry_bar {
  display:flex;
}

.entry_title {
    flex: 1;
}