Adjusting the size of a parent flexbox to expand or contract in relation to another flexbox

Within my parent div, I have implemented flexbox. Adjacent to the parent div is another flexbox.

The flexbox on the right side can contain 1, 2, or 3 items that influence its growth/shrinkage.

I expect the size of the parent div to adjust according to the contents of the flexbox on the right, but this doesn't seem to happen automatically.

Can someone please provide insights into what might be causing this issue?

For reference, here is the codepen example. 

.overlay {
  bottom: 0;
  display: block;
  height: 48px;
  left: 65px;
  padding: 0;
  position: absolute;
  right: 255px;
  z-index: 4;
  background-color: cyan
}

.overlay-range {
  display: flex;
}

.inner {
  position: absolute;
  display: flex;
  right: -8em;
  background-color: red;
  padding: 5px;
  bottom: 20px;
}

span {
  width: 30px;
}
<div class="overlay">
  <div class="overlay-range">
    <input type="range">
  </div>
  <div class="inner">
    <span> + </span>
    <span> - </span>
    <span> * </span>
    <span> % </span>
    <span> / </span>
  </div>
</div>

htmlcssflexbox

Answer №1

The primary concern in this situation is the usage of absolute positioning for your inner element.

An element with absolute positioning is taken out of the normal flow and does not impact its parent container.

To address this issue, you can convert the overlay into a flex container, remove the position: absolute from the inner, utilize auto margins on the inner, and align it to the right.

Stack snippet

.overlay {
    bottom: 0;
    display: flex;
    height: 48px;
    left: 65px; 
    padding: 0;
    position: absolute;
    right: 255px;
    z-index: 4;
    background-color: cyan
}

.overlay-range{
  display: flex;
}

.inner {
    display: flex;
    background-color: red;
    padding: 5px;
    bottom: 20px;
    margin-left: auto;
    align-self: flex-start;
}

span {
  width: 30px;
}
<div class="overlay">
  <div class="overlay-range">
    <input type="range"></div>
   <div class="inner">
     <span> + </span>
     <span> - </span>
     <span> * </span>
     <span> % </span>
     <span> / </span>
   </div>
</div>

To ensure that the overlay adjusts its width as well, you should eliminate the right: 255px property from the overlay.

After making this adjustment, you can also remove the newly added margin-left: auto since it will no longer have any effect.

Stack snippet

.overlay {
    bottom: 0;
    display: flex;
    height: 48px;
    left: 65px; 
    padding: 0;
    position: absolute;
    z-index: 4;
    background-color: cyan
}

.overlay-range{
  display: flex;
}

.inner {
    display: flex;
    background-color: red;
    padding: 5px;
    bottom: 20px;
    align-self: flex-start;
}

span {
  width: 30px;
}
<div class="overlay">
  <div class="overlay-range">
    <input type="range"></div>
   <div class="inner">
     <span> + </span>
     <span> - </span>
     <span> * </span>
     <span> % </span>
     <span> / </span>
   </div>
</div>

If desired, you could opt to keep display: block on the overlay and switch the display: flex to display: inline-flex to align them side by side, although the previous version may be preferred.

.overlay {
  bottom: 0;
  display: block;
  height: 48px;
  left: 65px;
  padding: 0;
  position: absolute;
  z-index: 4;
  background-color: cyan
}

.overlay-range {
  display: inline-flex;
}

.inner {
  display: inline-flex;
  background-color: red;
  padding: 5px;
  bottom: 20px;
}

span {
  width: 30px;
}
<div class="overlay">
  <div class="overlay-range">
    <input type="range">
  </div>
  <div class="inner">
    <span> + </span>
    <span> - </span>
    <span> * </span>
    <span> % </span>
    <span> / </span>
  </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

Design that is specifically tailored for mobile devices and excludes desktop compatibility

I am faced with the challenge of designing a website that is responsive on mobile devices while not being responsive on desktop computers. To address this issue, I have implemented a series of media queries based on specific breakpoints: 320px, 321-480px, ...

css

Eliminate the horizontal scrollbar

I am currently working on enhancing the appearance of this HTML form using CSS. Although I have made progress, I am facing an issue with an unexpected horizontal scrollbar that I cannot seem to remove. To address the layout problem of having 2 columns, I ...

htmlcssforms

Adjust the text size to fit perfectly within the boundaries of a textarea input field

Is there a way to ensure that users type within a specific area with formatting and returns in a textarea element? I'm looking for a solution that limits overflow and ensures users stay within the designated area. How can this be achieved? I am worki ...

htmlcss

Adjusting the size of a button in HTML and CSS

Check out this code: /* custom button */ *, *:after, *:before { box-sizing: border-box; } .checkbox { position: relative; display: inline-block; } .checkbox:after, .checkbox:before { font-family: FontAwesome; font-feature-settings: normal; - ...

javascripthtmlcssanimation

Utilize the entire width for header elements

I have implemented four header elements: home, about, portfolio, and contact. I want these elements to stretch across the entire navigation bar with each taking up 25% of the space. How can I achieve this? Additionally, I specified that the home element sh ...

htmlcss

Ensure that the div and table header remain in a fixed position when scrolling

I have a container with a dropdown at the top and a table at the bottom. I am implementing ngx-infinite-scrolling feature, and I want the container and the table header to remain fixed when scrolling down as more data is loaded. You can view the jsfiddle ...

cssbootstrap-4

Is there a way to verify if a particular element on a webpage has been altered?

Currently, I'm in a bit of a pickle trying to secure a spot in a Zoom class. If I fail to secure a spot, I'll owe a driving school $300. It's a long story, but not really crucial. My main goal is to receive a notification when the updated da ...

pythonhtmlhash

deciding on the axis for flipping a div with CSS

Is there a way to change the setting so that when using -webkit-transform: rotateY(180deg), it rotates from either the far left or right edge of the div, similar to how a door swings open? ...

javascriptcss

FireFox - Dynamic Blinking Divs on Hover

It seems like in FireFox and IE, my hover effect is blinking for some reason. I can't figure out why this is happening. Should I switch to using JavaScript for my hovers or is there an easier CSS solution? Here's a JSFiddle link to demonstrate th ...

htmlcssinternet-explorerfirefoxhover

Utilize the input field value in an HTML dialog box to assign it to a variable in the code.gs file with the help

I'm trying to create a dialog box where the user can select a year, and then have the server process the selected value using the function doSomethingWithCompetitionYear(theYear). I've researched several discussions, but I'm having trouble ...

javascripthtmlgoogle-apps-scriptdialog

Issue with zeroLineColor and zeroLineWidth not functioning properly for the x-axis within Chartjs

Looking to customize the width and color of the x-axis in Chartjs? While it's straightforward for the y-axis using zeroLineColor and zeroLineWidth, achieving the same effect for the x-axis seems trickier. If you try adding: ticks: { beginAtZero: tr ...

javascripthtmlcsschart.jschartjs-2.6.0

Instructions on adding a class to the parent element when the child has a particular class

Here is the html structure I am working with: <section> <div class="v-middle"> <div class="row"> <h5 class="heading">Heading goes here</h5> </div> </div> </section> ...

javascriptjqueryhtmlparent-child

IIFE and the Twitter share button are a powerful duo

As I experiment with this quick creation of mine, two questions have arisen. The first one is, how can I encapsulate all the JS code within an IIFE without breaking it? The second question is about finishing the twitter button to enable sharing the act ...

javascripthtmlapitwitteriife

Save web pages and images using Puppeteer

I'm currently working on saving a webpage for offline use using Nodejs and puppeteer. While many examples show using: await page.screenshot({path: 'example.png'}); This method doesn't work well for larger webpages. A more effective ap ...

javascriptnode.jshtmlweb-scrapingpuppeteer

What is the best way to display lengthy content using a pair of HTML tags?

I am facing an issue with my Angular4 app where I have a <md-card-content> tag on part of my page. Inside this tag, I am trying to display some content within a <p> tag which has a maximum height of 20cm. While this setup works fine for short ...

htmlcssangularmd-card

Is there a way to select multiple items using the same xpath in Python Selenium by clicking on them?

I am facing a challenge with my webpage code. The code snippet below presents a radio button setup: <label data-correct="false"> <input type="radio" ng-model="quizCtrl.state.selectedOptionForCurrentQuestion&quo ...

pythonhtmlcsspython-3.xselenium

Utilizing SEO and incorporating special characters like !# in a website's URL

I came across an interesting concept about designing a website that utilizes AJAX to load each page section without compromising SEO. It involved incorporating !# in the URL, similar to the approach adopted by Twitter. However, I've been unable to loc ...

javascripthtmlajaxseo

CSS grid challenges on a massive scale

My CSS grid timeline is currently generating around 1300 divs, causing performance issues. Is there a way to style or interact with the empty nodes without rendering all of them? I also want each cell to be clickable and change color on hover. Any suggest ...

javascriptcsscss-grid

What's the best way to toggle the visibility of an input-group in Bootstrap?

Is there a way to properly hide and show a Bootstrap 5 input-group? You can see an example here: https://jsfiddle.net/o08r3p9u I'm facing an issue where once the input group is hidden, it doesn't show correctly when displayed again. How can I e ...

javascripthtmlcssbootstrap-5

Creating double borders in CSS with the second border extending all the way to the top of the element

Can you help me figure out how to achieve this effect using CSS? It seems like a simple task: border-top: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-bottom: 1px solid #848484; border-right: 1px solid #848484; Just add: box-shadow: 0.7px ...

htmlcssbutton