How to Make the <div> Element Fill the Remaining Horizontal Space in Flexbox

Solutions with CSS

We have a Flexbox with two <div> elements and want the left <div> to fill the remaining space, whereas the right <div> should always be the same width.

So, we’re going to demonstrate how to make the <div> element fill the remaining space in Flexbox. Let’s see an example, and then we’ll explain it.

In the following example, scale the window down to see the result.

Example of making the <div> element fill the remaining horizontal space in Flexbox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .ar-course-nav {
        cursor: pointer;
        padding: 8px 12px 8px 12px;
        border: 1px solid grey;
        border-radius: 8px;
        color: #555555;
        display: flex;
        justify-content: space-between;
      }
      .ar-course-nav:hover {
        background-color: rgba(0, 0, 0, 0.1);
      }
      .content {
        width: 96%;
      }
      .top-row {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .bottom-row {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .left {
        margin-right: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex-grow: 1;
      }
      .right {
        text-align: right;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .arrow {
        margin-left: 8px;
      }
    </style>
  </head>
  <body>
    <div class="ar-course-nav">
      <div class="content">
        <div class="top-row">
          <strong title="Some name, which is really quite long and goes on a bit. Then, when you think it stops, it keeps on going even longer!">
            Some name, which is really quite long and goes on a bit. 
            Then, when you think it stops, it keeps on going even longer!
            </strong>
        </div>
        <div class="bottom-row">
          <div class="left" title="A really really really really really really really really really really really long name">
            A really really really really really really really really really really really long name
          </div>
          <div class="right"> Created: 27 April 2020 </div>
        </div>
      </div>
      <div class="arrow">
        <strong>&gt;</strong>
      </div>
    </div>
  </body>
</html>

Result

Scale the window down to see the result.
Some name, which is really quite long and goes on a bit. Then, when you think it stops, it keeps on going even longer!
A really really really really really really really really really really really long name
Created: 27 April 2020
>

In our example, we used the CSS flex-grow property, which forces a flex item to take free space on the main axis. It expands the flex item as much as possible and thus, adjusts the length to the dynamic context.

You can use the flex-grow property or the flex shorthand property. In either case, set the value to 1.

Note, flex items are set to flex-shrink, by default. This allows them to shrink for preventing overflow of the container. But, you can disable this by using flex-shrink: 0.