How to have 1 column in a flex box fill remaining space-CodePudding

I have the following html:

<div id="inner-container">
   <div id="titles">
       <div id="main-title">Main title here</div>
       <div id="page-title">Page title here</div>
   </div>
   <nav id="progress-container>
       <div id="page-counter">Page count here</div>
       <a id="link-to-page-1"></a>
       <a id="link-to-page-2"></a>
       <a id="link-to-page-3"></a>
       <a id="link-to-page-4"></a>
       <a id="link-to-page-5"></a>
       <a id="link-to-page-6"></a>
   </nav>
</div>

and this css:

#inner-container {
    display: flex;
}
#titles > div {
    width: 100%;
}
#progress-container #page-counter {
    float: left;
}
#progress-container a {
    display: inline-block;
    width: 30px;
    height: 12px
    border: 3px solid #ffffff;
}
@media (max-width: 900px) {
    #progress-container #page-counter {
        display: none;
    }
}

I would like to add the necessary css flex rules so that #titles occupies the full remaining width, left over by #progress-container. I have tried:

#titles {
   flex-grow: 1;
}

And I've tried various rules for #page-progress, including 'flex-basis: auto' and 'flex-basis: content', but nothing has worked.

Note that I cannot set a fixed width to #progress-container as the number of 'pages' is dynamic and will vary. Also the #page-counter disappears below 900px.

If anyone has any ideas, I'd like to hear them!

CodePudding user response：

try adding flex: 1; in #titles. learn about flex properties over here

#titles {
 flex: 1; 
}

codepen link