Два DIV в ряд, один резиновый

#html #css

Можно ли сделать без привлечения JS следующее? Есть два div'a расположенных в ряд,
один принимает ширину контента, которая может быть разной при каждой загрузке, второй
- резиновый и занимает всю оставшуюся ширину до границы родительского блока. Гугл даёт
решения только для случаев, когда размер первого div'a фиксированный.
    

Ответы

Ответ 1

Например используя display: flex у родителя, flex: none у первого div'а и flex: 1
у второго div'а:



.parent {
  display: flex;
}

.first {
  flex: none;
}

.second {
  flex: 1;
  background: teal;
}

  
Текст нефиксированного размера
  




Ответ 2

Можно так:



.wrapper {
  border: 1px solid #000;
  width: 400px;
  height: 200px;
  display: grid;
  grid-template-columns: min-content minmax(min-content, 1fr);
}

.a {
  border: 1px solid #000;
}

  
Какой-то длинный текст
  
Текст