How to Fill the Remaining Width of a Container Element in CSS?

Filling Remaining Container Width with CSS

In the realm of web design, it is often essential to fill the remaining space within a container element. This can be particularly useful in creating headers or navigation bars that occupy a portion of the screen. Let's explore how to achieve this using CSS.

Consider the following code snippet:

<code class="html"><header>
  <img src="image.jpg" />
  <div id="middle">Middle Element</div>
  <div id="right">Right Element</div>
</header></code>

<code class="css">header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
}</code>

As you can see, the div with the id "middle" is expected to fill the remaining space in the header bar. Let's use CSS to make this happen:

<code class="css">#middle {
  flex: 1; /* New code */
}</code>

By adding flex: 1, you tell the browser to use a flexible sizing scheme for this element, where it takes up as much space as possible while respecting the constraints of its container.

Additional Notes:

• The calc() function can be used to perform mathematical operations on CSS values. In this case, calc(100% - 100px) would calculate the remaining width of the container after the left div takes up 100px.
• Alternatively, you can set font-size: 0 on the outer element to remove any whitespace between inline elements.

The above is the detailed content of How to Fill the Remaining Width of a Container Element in CSS?. For more information, please follow other related articles on the PHP Chinese website!