Растянуть div на всю свободную (максимальную) ширину

#html #css

Есть два блока. Первый блок имеет динамическую ширину, т.е. ширина зависит от содержимого.
Второй блок должен быть растянут на всю остальную (свободную) ширину.



.parent {
  border: 2px solid red;
  height: 30px;
  line-height: 26px;
}
.child {
  display: inline-block;
  border: 2px solid blue;
}

  
Содержимое
  
Второе содержимое





Как можно с помощью CSS растянуть второй блок на всю свободную ширину?
    

Ответы

Ответ 1

Знаю два хороших метода, как растянуть второй блок на всю свободную (максимальную)
ширину:


Современный метод ― с помощью flexbox.



.parent {
  display: flex;
  border: 2px solid red;
  height: 30px;
  line-height: 26px;
}
.child {
  display: block;
  border: 2px solid blue;
}
/* Растягиваем второй блок на максимальнуцю ширину */
.child.max {
  flex: 1;
}

  
Содержимое
  
Второе содержимое




Один из необычных методов ― использовать float и overflow. Overflow создаёт отдельный
контекст форматирования для выбранного элемента, тем самым локализуя действие свойства
float внутри элемента к которому применён. Подробнее...



.parent {
  border: 2px solid red;
  line-height: 26px;
  overflow: auto; /* Это чтобы родитель не терял высоту */
}
.child {
  display: block;
  float: left;
  border: 2px solid blue;
}
/* Растягиваем второй блок на максимальнуцю ширину */
.child.max {
  float: none;
  overflow: auto;
}

  
Содержимое
  
Второе содержимое






Уточнение: overflow должен быть единственным в родителе и находится после всех float.