Ширина исходя из содержимого элемента, минус n px?

Question

[SuperToster]

Здравствуйте.

Опытные товарищи, спасите пожалуйста! Есть разметка которую нельзя менять. В попытках справиться стилями, сломал все доступные копья : )

Есть вот такая разметка: https://jsfiddle.net/6193tocb/2/

Три блока:
- Ширина первого зависит (и должна зависить) от количества текста;
- Во втором блоке лежит элемент с фиксированной шириной (20×20px);
- Третий блок имеет ширину 100%.

Если текста много, первый блок занимает всю доступную ширину и выталкивает второй блок на новую строку. Как заставить второй блок всегда оставаться на одной линии с первым блоком и при этом прижиматься к первому блоку.

Answer 1

[Сергей delphinpro]

.first-block {
  max-width: calc(100% - 20px);
}

Comments

[Rhesus Negative]

не учел "- Ширина первого зависит от количества текста;"

[Сергей delphinpro]

Rhesus Negative, как это не учел - она зависит. я же пример ваш отредактировал

[SuperToster]

Сергей delphinpro Плохо расписал задачу, сорри! : (
Ширина .first должна зависеть от содержимого элемента. Т.е. - auto.
100% растянет .first на всю ширину враппера.

[Сергей delphinpro]

SuperToster, блин, вы посмотрите на первый блок (1, должно быть) — зависит от содержимого. стили-то одинаковые!

касаемо второго - то это обычное поведение блока при переполнении текста

Answer 2

[Rhesus Negative]

.first {
flex: 0 1 auto;
background: green;
width: calc(100% - 21px);
}

Comments

[SuperToster]

Rhesus Negative Плохо расписал задачу, сорри! : (
Ширина .first должна зависеть от содержимого элемента. Т.е. - auto.
100% растянет .first на всю ширину враппера.