The interaction of flex-box in the presence of absolute positioning

Hey everyone, I need some help understanding why the flexbox is behaving oddly in this code snippet.

1.

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            position: relative;
        }
        .container {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="item"> hello</div>
    <div class="item"> hi</div>
</div>

</body>
</html>
.container {
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            justify-content: space-between;
        }
.container {
            position: absolute;
            left: 0;
            right:0;
            top: 0;
            display: flex;
            justify-content: space-between;
        }

I thought that with justify-content set to space-between, the flexbox would automatically take full width. However, when I adjust the container's position, it no longer takes up the full width and I have to manually force it to do so.

Answer №1

Having a div element set to full width allows justify-content to work properly. However, if you include position absolute, the div will only take the width of its content.

To ensure justify content takes up the full width, you must specify the width like so:

.container {
            position: absolute;
            left: 0;
            right:0;
            top: 0;
            display: flex;
            justify-content: space-between;
        }

Alternatively, you can also use this method:

.container {
            position: absolute;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

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

Assistance with changing styles

Hey there, I could really use some assistance. I've created a style switcher, but I'm struggling to figure out how to replace the stylesheet properly. Currently, my code empties the <head> element when what I really need is for it to simply ...

The form within the dynamically loaded AJAX content is malfunctioning

My webpage is set up to load content from a separate file (content.php) into a div and refresh it every 5 seconds. In the content.php file, I have a form (basic HTML without javascript) that works fine when accessed directly at (example.com/content.php). ...

Modifying Names and Job Titles to Appear Beneath Images in HTML and CSS

Is there a way to update names and job titles directly below the images? To find out more, click on this link ...

"Create a dynamic box grid with varying heights using the responsive design features of Bootstrap

I have been attempting to create a responsive grid consisting of 6 textboxes using the box class and bootstrap. My issue is that due to varying amounts of text in each textbox, they end up with different widths/heights. However, I want them all to have th ...

Using jQuery to apply a CSS border to an image within a textarea

Working with TinyIMCE, I am looking to incorporate a border around all images within the textarea whenever a user submits the form. $("form").submit(function() { var content = $("#edit-message1-value").val(); // Afterwards, I want to manipulate the cont ...

Tracking the movement of a handheld device through GPS technology

I am interested in creating a mobile application that can track the real-time location of users who have the app installed on their devices. The concept is to allow one or more users to follow the movement of another user using GPS on a map. I plan to deve ...

The CSS "ul" selector targets unordered lists in HTML

How can I target the ul elements highlighted below in my HTML markup without using a class or id for reference? Here is the relevant portion of my HTML code: <div id="mainmenu"> <ul class="menu"> <li class="item-472"> < ...

iOS devices will not scroll horizontally if there is a div that scrolls vertically within a div that scrolls horizontally

Picture a div that scrolls horizontally, housing two vertical-scrolling divs. You'll need to scroll left and right to navigate, then up and down inside the inner divs to read the content. /* RESET TO MINIMUM */ body, html { height: 100%; mar ...

Synchronize two div elements with JavaScript

The demonstration features two parent divs, each containing a child div! The first parent div's child div is draggable and resizable using JQueryUI. There are events for both dragEnd and resizeEnd associated with this div. The goal is to synchronize ...

Loading images in advance with AJAX for enhanced AJAX performance

My website is structured in a sequential manner, where page1.html leads to page2.html and so on. I am looking to preload some images from the third page onto the second page. After searching, I came across this amazing code snippet: $.ajax({ url ...

Trigger an alert message upon clicking a button within CK Editor

Is it possible to trigger an alert message using ckeditor when a specific button is clicked? Below is the code snippet for reference: $(document).ready(function () { $(".cke_button__bold").click(function () { editor.on("CKEDITOR.cke_butto ...

Ben Kamens has developed a new feature in jQuery Menu Aim where the sub menu will not reappear once it

While exploring Ben Kemens’ jquery-menu-aim, I came across a demonstration on codepen. The code on codepen allows smooth transition from the main menu to the sub menu, but if you move away completely, the submenu remains visible and doesn't disappe ...

Can the <article> tag and all its content be positioned in the center of the webpage?

Can the <article> and its content remain centrally aligned on the page? Check out my website here: Typically, when you visit a website, the article is positioned in the center of the page. However, in my case, the article only remains centered when ...

Retrieve the value of a variable from a JSON decoded response

My json response has been decoded into an array $data: stdClass Object ( [outboundSMSMessageRequest] => stdClass Object ( [deliveryInfoList] => stdClass Object ( [deliveryInfo] => stdClass Object ( [address] => 8606142527 [deliveryStatus] => ...

Require this form to be centered flawlessly

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post"> <div class="form-group"> <label class="control-label col-sm-2 lb" for="email">Email : </ ...

Issue with the Bootstrap carousel jQuery plugin

Hi everyone, I need some help with creating a multiple items bootstrap carousel. I keep getting an error message that says "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function. Can anyone guide me on how to fix this issu ...

What could be causing the submit button on this form to not be centered by this CSS?

I have been attempting to center this submit button using CSS, however, despite researching various online resources, I have not yet discovered a solution. It seems strange that such a simple task is proving to be so challenging. td.class > div { w ...

Restricting the height of the grid list in Vuetify

Lately, I've been working with Vue.js and the Vuetify framework, and I encountered a challenge that has me stumped. In certain instances, I need to present data in a grid layout using the vuetify grid component. After examining the code, I decided t ...

Validating SASS based on class name

Hi there, I am fairly new to SASS and do not consider myself a programming expert. I have ten aside elements that each need different background colors depending on their class name. Even after going through the SASS documentation, I am still unable to f ...

How can you generate a distinct id value for each element within an ngFor iteration in Angular 4?

I encountered an issue where I must assign a distinct id value to each data row within my *ngFor loop in angular 4. Here is the code snippet: <div *ngFor="let row of myDataList"> <div id="thisNeedsToBeUnique">{{ row.myValue }}</div> & ...