如何在弹性盒中有1列填充剩余空间

Question

我有以下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>

此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;
    }
}

我想添加必要的CSS flex规则，以便#titles占据完整的剩余宽度，由＃progress-container留下。 我尝试过：

#titles {
   flex-grow: 1;
}

我尝试了＃页面制作的各种规则，包括“ flex-basis：auto”和“ flex-basis：content”，但没有任何效果。

请注意，我无法将固定宽度设置为＃progress-container，因为“页面”的数量是动态的，并且会有所不同。 ＃page-counter也消失在900px以下。

如果有人有任何想法，我想听听他们的声音！

Answer 1

尝试添加flex：1;在#titles中。
通过

#titles {
 flex: 1; 
}

codepen link