Give the inner container the ability to expand to fill the remaining space

After formatting my HTML code as shown below:

https://i.sstatic.net/oaVVg.png

The blue rectangle takes up 70% of the outer container's width, while the green rectangle occupies the remaining 30%.

My goal is to have the blue rectangle expand to fill the entire width of the outer div when the green rectangle is set to display:none. I'm aiming for a layout like this:

https://i.sstatic.net/huNa4.png

Currently, when I hide the green rectangle div, the display looks like this:

https://i.sstatic.net/eiq3n.png

Any assistance on achieving this would be greatly appreciated.

html, body {
    height: 100%;
}

#outer {
    border: 1px solid black;
    height: 20%;
    width: 50%;
    display:flex;
}

#inner_long {
    width: 70%;
    background-color: blue;
}

#inner_short {
    width: 30%;
    background-color: green;
    /*display:none;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "outer">
    <div id = "inner_long">

    </div>
    <div id = "inner_short">

    </div>
  </div>
</body>
</html>

Answer №1

If you're utilizing flex in your layout, it's advisable to use the flex property in conjunction with flex-basis to specify a fixed width for the shorter element. This will allow the longer element to occupy the remaining space by setting flex: 1 on it:

html, body {
    height: 100%;
}

#outer {
    border: 1px solid black;
    height: 20%;
    width: 50%;
    display:flex;
}

#inner_long {
    /* ensure the longer element fills up available space */
    flex: 1;
    background-color: blue;
}

#inner_short {
    /* assign a fixed 30% width to the shorter element */
    /* by doing this, the longer element automatically takes up 70% of the space */
    /* in case the shorter element is removed, the longer element expands to fill the space */
    flex: 0 0 30%;
    background-color: green;
    /*display:none;*/
}
<div id = "outer">
  <div id = "inner_long"></div>
  <div id = "inner_short"></div>
</div>

<br />

<div id = "outer">
  <div id = "inner_long"></div>
  <div id = "inner_short" style="display: none;"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to align a scalable SVG image in the center?

My goal is to horizontally align this SVG within its container, which could be any div, body, or other element. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 190" preserveAspectRatio="xMidYMid slice" class="svg-content"> &l ...

When incorporating script tags in React, an "Unexpected token" error may arise

I am in the process of converting my website to a React site, but I am encountering an issue with the script tags not working. It keeps showing an unexpected token error. Here is the code snippet: <div className="people"> How many people are you ...

"An innovative social media platform feature resembling a Linkedin/Facebook post box

I am looking to develop a post box feature similar to LinkedIn and Facebook. When a URL is pasted into the box, I want a thumbnail to be generated. Two main questions: - Is there an existing component that already does this? I have searched extensively b ...

Click to shift the div downwards

Currently, I have a piece of javascript applied to a div that directs the user to a specific link: <div style="cursor:pointer;" onclick="location.href='http://www.test.com';"> I am wondering if there is a way to add an effect where, upon ...

Disorganized jQuery Animation

Looking for some help with an animation I have on my website. The animation is supposed to smoothly move in and out when the mouse cursor hovers over it, but as you can see, it's a bit messy. This project involves HTML, CSS, and jQuery <!DOCTYPE ...

Tips for customizing a button's font with CSS

Update: I have noticed that the issue mentioned in this question is specific to OS X browsers. I am looking to modify the font style of my input buttons using CSS, similar to the following: input[type="button"] { font: italic bold 3em fantasy; } How ...

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

Using JavaScript (AJAX), learn the process of incorporating XML data within HTML files

I'm relatively new to HTML and I'm attempting to create a self-contained HTML page that includes all necessary CSS, data, and JavaScript within the file itself. While I understand that this will result in a rather messy HTML document, it is essen ...

If every single item in an array satisfies a specific condition

I am working with a structure that looks like this: { documentGroup: { Id: 000 Children: [ { Id: 000 Status: 1 }, { Id: 000 Status: 2 ...

If the selected tab matches, collapse it using jQuery

When utilizing the jQuery accordion, I am looking to collapse if the currently active tab is selected. If I click on the same tab again, nothing happens. However, if I click on another tab, the activated tab changes accordingly. Check out an example on j ...

Creating a personalized image download feature in PhotoSwipe.js

I am currently working on a project that involves using the PhotoSwipe gallery. At line 175, there is code url:items[0].hqImage. I want to use the index of the current image instead of 0. How can I achieve this? I attempted to utilize the pswp.listen(&ap ...

Guide to setting up collapsible sections within a parent collapsible

I came across this animated collapsible code that I'm using: https://www.w3schools.com/howto/howto_js_collapsible.asp Here is the HTML: <button type="button" class="collapsible">Open Collapsible</button> <div class="content"> &l ...

Background image spacing

Can anyone explain why there is extra space after my background image in this code snippet? (red line in image highlights the spacing issue) Even though the background image doesn't have this space, it seems to extend beyond where the black color ends ...

Substitute all web links contained within the DIV

Is there a way to change the URLs within a specific DIV? Here's an example of what I want to do: <div id="SearchList"> <a href="www.google.com/up">up</a> <a href="www.google.com/down">down</a> <a href="www.google.com/ ...

I'm looking for a way to showcase tasks in Fullcalendar that don't have a set end date

Is there a way to display a task in the full calendar when the task has a start date but no defined end date, such as a promotion that lasts until stock runs out? I would like the timeline for this type of task to extend indefinitely. However, since such ...

What is the best way to adjust the size of the close button in react-bootstrap for a unique design?

<CancelButton className="exitBtn"/> .exitBtn{ height:40px; width:35px; } I'm trying to adjust the dimensions of the cancel button, but for some reason it's not working. Can someone provide guidance on how to successfully ...

Incorporating a download link with the combination of canvg and amcharts

I am attempting to include a download link on a page that utilizes AmCharts and CanVG. The visualization of the graph and image is functioning properly. Now, I am in need of a download link to offer users the ability to download the displayed graph image. ...

Troubleshooting the malfunctioning of the Bootstrap slide animation

I've been attempting to implement scroll animation on a div, but for some reason, it's not working as intended. I must have made a mistake somewhere, but I can't figure out where. Any help in resolving this issue would be greatly appreciated ...

What is the best way to trigger a jQuery animation when a section becomes visible using Fullpage.js?

Within my website, I've incorporated Fullpage.js and am interested in triggering jQuery animate functions as users scroll to specific sections. Although I tested methods like mouseenter, mouseover, and mouseleave from the prior section, they did not d ...

Link insertion column

How can I insert a hyperlink into this particular column? <div class="col-md-6" style="height: 125px;"> <div style="background: #ffffff;"></div> <div class="borde ...