Elements resize based on their parent's and siblings' widths

I have organized the parent div and its three children divs. Presently, the third child is concealed. I've designated the width of the first child as 20% and desire for the second child to automatically take up the remaining width without explicit settings. The third child has a width of 20%, and when revealed, it should adjust proportionally within the parent's width while causing the second child to readjust its own width accordingly.

<div id="parent" style="background-color: pink;">
    <div id="child1" style="background-color: gray; display: inline-block; width: 20%;">
        div1
    </div>

    <div id="child2" style="background-color: blue; display: inline-block">
        div2
    </div>

    <div id="child3" style="background-color: violet; display: hidden; width: 20%;">
        div3
    </div>
</div>
htmlcss

Answer №1

Utilizing a flex layout is the way to go for this implementation. Below is the code snippet tailored to your scenario:

#parent {
  display: flex;
  flex-direction: row;
}
#child1 {
  flex-basis: 20%;
}
#child2 {
  flex: 1;
}
#child3 {
  display: none;
}
<div id="parent" style="background-color: pink;">
    <div id="child1" style="background-color: gray;">
        div1
    </div>

    <div id="child2" style="background-color: blue;">
        div2
    </div>

    <div id="child3" style="background-color: violet;">
        div3
    </div>
</div>

Here are some key points to consider:

  1. Set #parent's display property to flex in order to activate the flex layout for all child elements.
  2. Specify the flex-direction as row to arrange child elements horizontally.
  3. Assign a flex value of 1 to #child2, allowing it to adjust its size to fill all available space within #parent.

It's important to note that any inline display CSS rules are redundant once the flex layout is applied.

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

Can someone guide me on how to utilize the onkeyup event within a bootstrap select element?

This code uses Bootstrap to filter elements, but I want to implement an onkeyup event to trigger a function. Whenever I type in the search input, I want it to automatically call myFunction(). <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/ ...

htmlbootstrap-5

Guidelines for crafting an intricate selector by utilizing mergeStyleSets and referencing a specific class

I'm currently in the process of developing a web application using ReactJS. In my project, I have the following code: const MyComponent = (props: { array: Array<Data> }) => { const styles = mergeStyleSets({ container: { ...

javascriptcssreactjstypescriptfluent-ui

Obtaining an Element using Selenium with a specific label

My goal is to align the texts (answers) beside the radio buttons in order to compare them with the correct answer. Below is the HTML snippet: <tbody> <tr> <td class="middle" width="15"> <input name="multiple_choice_resul ...

htmlselenium-webdriverlabel

Retrieving the value of a <select> element using React.useState in a Nextjs environment

Encountering an issue in Nextjs involving the useState function from React. There is a select element with multiple options. Upon selection, the useState should store the value of the selected option. const [value, setValue] = useState('') ... ...

javascripthtmlreactjsnext.js

The function Event.preventDefault seems ineffective when attempting to block input of CJK (Korean) characters in a v-text-field of type

Currently, I am tackling an issue in a Vue project where I need to fix a small bug. However, the solution seems quite challenging. I have managed to make the v-text-field accept only numerical input, which is functioning well. <v-text-field type=" ...

javascripthtmlvue.jsvuetify.js

Error in Typescript: The type 'Element' does not have a property named 'contains'

Hey there, I'm currently listening for a focus event on an HTML dialog and attempting to validate if the currently focused element is part of my "dialog" class. Check out the code snippet below: $(document).ready(() => { document.addEventListe ...

javascriptjqueryhtmltypescript

Getting rid of unnecessary input field in a v-select component in Vuetify

There seems to be an additional input inside my v-select, causing a style issue. The custom component I'm using doesn't include it, so I suspect it's related to Vuetify. Is there a way to remove this extra input? ...

htmlvue.jsselectvuetify.jsv-select

How can the top height of a jquery dialog be reduced?

Just starting out with jquery, I've got a dialog box and I'm looking to decrease the height of this red image: Is there a way to do it? I've already made changes in the jquery-ui.css code, like so: .ui-dialog { position: fixed; to ...

javascriptjqueryhtmlcss

What advantages and disadvantages come with choosing between using vh and vw for responsive text?

My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...

htmlcsstextflexbox

My attempts to integrate PHP into jQuery tabs have been unsuccessful

My code seems to be acting strangely, as the PHP code I originally entered in tab 2 has somehow escaped that tab and spread into all the other tabs. This means it is visible in multiple tabs instead of just one. The purpose of this PHP code is to retrieve ...

phpjqueryhtmltabs

Using a Second List Element in CSS Image Rollover Map with jQuery

I have been utilizing this interactive map from Wolf's website, but I am interested in incorporating a secondary list of countries alongside the existing one as the base for the script. However, due to presentation reasons, the second menu cannot resi ...

jquerycssrolloverimagemap

When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...

javascriptcss

Black textures with images sourced from the same domain - Cross-origin

Despite trying numerous solutions and tips to resolve the cross-origin issue, I still can't seem to fix it. There are no errors, the images are hosted on the same domain as the webgl test, but the textures appear black. Occasionally when I refresh rep ...

javascripthtmlthree.js

Issues arise when attempting to determine the accurate dimensions of a canvas

Looking at my canvas element: <canvas id='arena'></canvas> This Element is set to fill the entire website window. It's contained within a div Element, both of which are set to 100% size. I attempted running this script: var c ...

javascripthtmlcsscanvaselement

Guide on hosting Google's Material Design Icon-Fonts on your personal server and incorporating them into your website

To access the Material Design Icon Fonts, it is advised to download them in various formats such as ttf, eot, woff, and woff2. These fonts can then be hosted on a server location and integrated into your CSS using the following code: @font-face { font- ...

cssfontsmaterial-designwebfontsicon-fonts

Transition color seamlessly from the left side to the right side upon hover

Here is a simple code snippet for creating a line that changes color on hover: li::after { height: 2px; display: block; background: rgb(195, 195, 195); border-right: 1px white; content: ''; } li:hover:after { position: relative; ...

cssanimationtransition

What is the reason this straightforward regex functions perfectly in all cases, except for when applied to the html5

This particular HTML input turns red to signify that the pattern has not matched when the value in the input field is "1". var newInput = document.createElement ('input'); newInput.pattern = '^\d+\.?\d*$'; document.getEl ...

javascripthtml

Showing two divs on top of an image inside a container

Hey there, I apologize for the messy title but I've been searching for an answer for a couple of hours now. <div id="lightbox"> <img src="blabla.png"> <div href="#" id="next" onClick="next(1)"></div> <div href=" ...

htmlcss

Tips on incorporating animations into a class design?

I'm trying to figure out how to make an image disappear by adding a class However, when I try this, the element vanishes without any animation I'd like it to fade away slowly instead I've heard there are CSS3 properties that can help achi ...

htmlcss

Show different values in Array arranged in Table format with the help of Ajax code

Check out the code I have attempted below: <script type="text/javascript"> $('#doctorselected').on('change', function(e){ console.log(e); var doctorid = e.target.value; var url = '{{URL::to('getdoc ...

htmlajaxlaravel