The justify-content: space-between property does not work in a nested flex box scenario

I'm currently working on styling a cart in Angular and facing an issue with aligning the price all the way to the right of the cart. I attempted using `space-between` within the outer div, which worked fine, but when applied to the inner div, it doesn't seem to work. Can anyone point out what I might be missing or misunderstanding in this case?

Here is a link to the code pen for reference: https://codepen.io/awschneider-dev/pen/rNedLJg

Below is the HTML structure:

<div class="container">
    <h2>Cart</h2>
    <div class="cartProducts" *ngFor="let item of items">
        <hr>
        <div class="item">
            <div class="itemImage">
                <img class="productImage" src="../../assets/images/phones/{{item.image}}" alt=""/>
            </div>
            <div class="information">
                <div class="description">
                    <a href="#" class="fakeLink">Link to Item Page</a>
                </div>
                <div class="price">
                    {{item.price | currency}}
                </div>
            </div>
        </div>
    </div>
</div>

Below is the CSS styling used:

/* CSS Styles */
div.item{
    display: flex;
    
}

div.information{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

div.container{
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

div.itemImage{
    min-width: 150px;
}

img.productImage{
    max-width: 100px;
    max-height: 150px;
    margin: 10px;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1.0em;
    margin-right: 1.0em;
    border-style: inset;
    border-width: 1px;
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
  } 

  a.fakeLink{
      font-weight: 750;
      font-size: larger;
      text-decoration: none;
      color: #0645AD;
  }

List of resources referred to:

How to fix flex box with justify-content space between

Justify-content: space-between works incorrect

Your input and assistance would be greatly appreciated.

Answer №1

To ensure functionality, adjust the width of div.information.

Here is a sample code snippet:

div.information{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%; /* customize based on your needs */
}

Answer №2

Include the following attribute in your CSS declaration:

div.details{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-grow: 2; // don't forget this line
}

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

Error in HTML: The AgGrid component is missing the required 'col' attribute

Initially, I worked with the 2.3.5 version of Ag-Grid which had a "col" attribute showing the relative index of the column for each cell element. The "row" attribute still remains unchanged. However, after upgrading to version 4.0.5, the "col" attribute ...

What is the best way to incorporate a hyperlink in a React project using Tailwind

I am working on a project using React and Tailwind CSS. I want to be able to redirect the user to the next page when they click on a link. I have tried using the <a /> tag, but I'm not seeing any noticeable difference between that and the <p ...

Frozen Blanket: Modifying Particle Velocity

I need assistance adjusting the particle speed in this snowfall animation script. I'm having trouble locating the specific values that control the "Falling Speed." The current speed of the falling particles is too fast, and here is most of the code sn ...

Utilize Bootstrap form control class to enhance the appearance of WooCommerce address fields

I'm struggling to incorporate the bootstrap class "form-control" into all of the woocommerce address fields in my account and during the checkout process. Essentially, I am attempting to apply the "form-control" class to both the billing and shipping ...

What could be the reason behind the link only functioning properly on macOS?

I tried accessing a link that works perfectly on Chrome, Safari, and Firefox on MacOS, but when I try to access it from Windows or Android, I get a 404 error in the browser. Here is an example link: This link is part of an m3u8 file, which can be accesse ...

The div element is experiencing a resizing issue

I am currently working on the following HTML markup: <div class="card" style="height:100%"> <div class="controlPanelContainer"> <div class="card" style="background-color:yellow;height:200px"> </div> <div class= ...

issues with background image alignment in css

I attempted to add a sticky background to a div, which was successful. However, I am encountering an issue where the background does not stretch enough during scrolling. Below is the CSS code I used to apply the background, along with screenshots displayin ...

Scrolling seamlessly within a container that is fixed in position

For hours, I've been attempting to incorporate smooth scrolling into my project with no success. The issue lies in the container where the anchor tags are located. If it's set to fixed position or absolute, none of my attempts seem to work. In ...

Issues have arisen with the main background image in IE7 on ProLoser's AnythingSlider

Check out my website: Everything is working perfectly with AnythingSlider in all browsers except for IE7 - not really a surprise. The background image of the entire page seems to be offset differently depending on the browser size. After some investigatio ...

Can you explain the significance of the <%= %> HTML tag?

I've recently been tackling a project with Webpack. For those not familiar, Webpack is a bundler that combines all your files into one final product. One task I encountered was trying to insert one HTML file into another, similar to an import or requ ...

Align the content of a collapsed bootstrap row vertically

In a row, I have two columns, each containing their own row. When the page width hits the 'xs' break-point, the left column's row will stack its columns on top of each other. The right column is taller than the left column, which leaves a l ...

CSS "background-position: bottom" Less than ideal performance on Mobile Browsers

body { background-color: #000000; background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Aurigids_-_Jeremie_Vaubaillon.jpg/1280px-Aurigids_-_Jeremie_Vaubaillon.jpg'); background-repeat: no-repeat; background-attac ...

When adjusting the window size with the <ion-split-pane>, both the menu and router outlet disappear

When I have two ion menus and one main content (router outlet) and resize the page or switch to mobile view, the page appears blank as if the content is missing. Here is the code: <ion-app> <ion-split-pane> <ion-menu side="start" me ...

Binding an event specifically for keypress action

Angular allows me to use <input (keyup.enter)"onEnter($event)"> to capture the Enter key being pressed by the user. Similarly, I can also detect other keys such as esc, space, and shift. But how can I detect when the user presses shift + up? Is th ...

An issue with jQuery and LESS causing stylesheets to update only once

Struggling with updating a custom CSS href - everything works perfectly the first time, but subsequent updates do not reflect any changes on the page. Even though I can see the href updating in Chrome debugger and there are no errors being thrown by LESS, ...

Interactive Infographics in HTML5 format

Currently, I am unable to find any examples on how to accomplish a specific task mentioned in the following link. If you have a tutorial with step-by-step instructions or a code project available, it would greatly assist me. Link: Evolution of WEB ...

Aligning Content in the Header

Currently, I am attempting to place a logo on my WordPress site right at the top of the header above the menus and in the center. Even though I've positioned it at the top, I'm struggling to align it horizontally in the center. I've experime ...

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

The Angular ng-repeat directive is populating a list with items, but the parameters enclosed in double curly braces

After calling an API, the response contains data in the following format: [{name: "ABC", age: 20}, {name: "DEF", age: 25}] Even though the $scope.names variable is assigned with the array from the API, when viewed in the browser, it displays 2 rows but th ...

Angular design pattern: organizing rows according to the month

I currently possess the following items: { "pk": 33, "name": "EVENT 634", "start_date": "2022-05-11T00:00:00", "end_date": "2022-05-14T00:00:00" }, { "pk": ...