html – Two DIVs in a row, one rubber


Is it possible to do the following without involving JS ? There are two div'a arranged in a row, one takes the width of the content, which can be different on each load, the second is rubbery and takes the entire remaining width to the border of the parent block. Google only gives solutions for cases where the size of the first div'a fixed.


For example, using display: flex on the parent, flex: none on the first div, and flex: 1 on the second div:

.parent {
  display: flex;

.first {
  flex: none;

.second {
  flex: 1;
  background: teal;
<div class="parent">
  <div class="first">Текст нефиксированного размера</div>
  <div class="second"></div>
Scroll to Top