What's the best way to use Flexbox to center a component with a "fixed width"?

As I work on my component, here is the code snippet from my highest parent, App.component:

app.component.html

    <div class="wrapper_flex">
  <div style="width:400px; background-color: pink;"></div>
  <div style="flex: 0 0 600px;">
    <app-feed></app-feed>
  </div>
  <div style="width:300px; background-color: green;"></div>
</div>

app.component.css

.wrapper_flex {
    display: flex;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
}

The structure of my "app-feed" component is as follows:

feed.component.html

<div class="container">
    <h4>Inicio</h4>
    <div>
        <app-tweet [division]="true" [tweet]=tweet [retweets]="retweets" [likes]="likes" *ngFor="let tweet of tweets"></app-tweet>
    </div>
</div>

feed.component.css

.container {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: red;
}

.header {
    box-sizing: border-box;
    padding: 0 16px 16px 16px;
}

After a page refresh, I noticed that the container shifts slightly. How can I ensure that the "Feed" component remains centered in my flexbox without any movement, fixed with a set width?

To view a live demo, follow this link:

If I remove the "h4" tag in feed.component.html, the container stays in place without any shifting, which is the desired outcome.

Here's the expected result (with h1 tag):

I am currently using Angular 11.

Answer №1

body {
    width: 100%;
    overflow-y: scroll;
}

To avoid the initial movement

It turns out the issue occurs when the webpage doesn't have a scrollbar initially, but when you expand an element, the browser displays one.

Answer №2

{

    <div class="wrapper_flex">
        <div class="right" style="width:400px; background-color: pink;"></div>
        <div style="flex: 0 0 600px;">
          <app-feed>
            <div class="container">
                <div class="h1">
                    <img style="width: 62px;
                    margin-top: 6px;
                    border-radius: 230px;" src="bg.jpg" alt="">hello
                </div>   
    <div>
        <app-tweet [division]="true" [tweet]=tweet [retweets]="retweets" [likes]="likes" *ngFor="let tweet of tweets"></app-tweet>
    </div>

    <div class="bottom">
        <div>hello this is Ravi</div>
    </div>

</div>
          </app-feed>
        </div>
        <div class="left" style="width: 300px; background-color: green;"></div>
      </div>

} using this code you can edit your post as like in link(which is given by you)

.wrapper_flex {
    display: flex;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
}
.container {
    display: sticky;
    width: 100%;
    color: white;
    background-color: red;
}

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 method for transmitting a URL API from an ASP.NET Core server to my Angular 2 single application?

Is there a way to securely share the url of the web api, which is hosted on a different server with a different domain, from my asp net core server to my client angular2? Currently, I am storing my settings in a typescript config file within my angular2 ap ...

Is there a way to turn off predictive text for reCAPTCHA on my mobile device?

Using reCAPTCHA on a sign-up form can get frustrating on mobile devices, with constant dictionary word suggestions while typing. I am aware of how to disable this feature for normal input fields by adding attributes through JavaScript, but shouldn't ...

Horizontal Accordion Design for Cascading Style Sheets (CSS) Books

I am currently working on developing a page that features a book layout. This page will include tabs that users can expand individually. If you would like to see a working example, you can check out this link: https://codesandbox.io/s/book-layout-l28gh?fi ...

Trouble with executing select query on connected tables in MySQL

$sql=mysql_query("SELECT b.book_id,u.user_id,user_name,book_name,review_date,book_rating,review FROM tbl_books b,tbl_user u,tbl_book_reviews br WHERE b.book_id=br.book_id AND u.user_id=br.user_id ...

Postback does not reload all controls in the NameValueCollection

Recently, I designed a custom User Control in asp.net. public class InputMask : CompositeControl, IPostBackDataHandler, IPostBackEventHandler Imagine the custom control is enclosed within a div element: <div runat="server" id="inputArea"> < ...

Adding the "unsafe" keyword before the URL in the href attribute ensures that potentially harmful URLs are

When attempting to launch an app, everything goes smoothly with a static URL. However, when using a dynamic href tag in *ngFor, the URL is modified by adding an unsafe keyword which causes it to fail. Currently operating on Angular 6, I am retrieving an I ...

Sending arguments from JavaScript to PHP via ajax

I am facing a challenge where I need to send a JavaScript variable to a PHP function. While I was successful in doing this with hard-coded values, I'm struggling when it comes to using variables. Here's an example of what worked for me: <butt ...

Is there a specific side effect that warrants creating a new Subscription?

Recently, I had a discussion on Stack Overflow regarding RxJS and the best approach for handling subscriptions in a reactive application. The debate was whether it's better to create a subscription for each specific side effect or minimize subscriptio ...

Customizing the text color of steps in a v-stepper component using Vuetify.js

When working with the v-stepper component of VuetifyJS, it is easy to change the color of the steps themselves by using the `color` prop. But how can I alter the text of each step? Specifically, I am looking to modify the color of the text that says Name ...

tilt and give motion to image within canvas

I am looking to incorporate skewing and animation effects on an image displayed on a canvas. While I have successfully drawn the image on the canvas using the code snippet below, I am unsure about how to apply skewing and animation to the image post-drawin ...

Create a mobile-friendly version of the website that retains all the functionality and features of the desktop

Currently, I am in the process of optimizing my website for mobile devices. However, creating a separate subdomain and folder for a new mobile version is proving to be a challenge since it was not originally requested. How can I ensure that the website ap ...

Creating a dynamic dropdown menu: a step-by-step guide

<ul class="nav navbar-nav friend-label"> <li class="dropdown" ng-repeat="module in modules"> <a href="" class="dropdown-toggle" data-toggle="dropdown"> {{module.ModuleName}} < ...

What is the best way to transform Vue JS templates into clean HTML code?

Hello, I've received a request to convert a full VueJS template into pure HTML for use in Angular. While I have access to all of Vue's files and codebase, I'm wondering if there's a fast method to convert these templates into standard ...

Utilizing Bootstrap to allow for seamless text wrapping around a text input field

I am trying to implement a "fill-in-the-blank" feature using Bootstrap, where users need to enter a missing word to complete a sentence. Is there a way to align the text input horizontally and have the rest of the sentence wrap around it? This is my curr ...

How can you apply margin to an element within a column in Bootstrap 4?

Within a column, I have several span elements: <div class="container-fluid"> <div class="row"> <div class="col"> <span class="myClass">some text</span> <span class="myClass">some text</span> ...

What is the best method for getting rid of blank white space on my website?

Having some trouble removing unnecessary white space on my website. The goal is to have the main text and logo centered on an image background, but I've been unsuccessful so far. I've experimented with different CSS properties like overflow-x: ...

How can I populate a <select> tag with options dynamically using C# when the page loads?

I am using jQuery ajax to populate cascaded dropdown elements from a database. The issue I'm facing is that I can't seem to add the default "Select Program" option at the top of my first dropdown dynamically. Even though I tried using the prepend ...

Tips for displaying and hiding content in Angular2

I have a component that toggles the visibility of elements by clicking a button. This is the snippet of my HTML code: <div *ngFor="let history of histories | sortdate: '-dateModified'"> <p><b>{{ history.remarks }}</b& ...

Tips for incorporating Angular2 into Eclipse using TypeScript

Recently, I delved into the world of Angular 2 and noticed that TypeScript is highly recommended over JavaScript. Intrigued by this recommendation, I decided to make the switch as well. I came across a helpful guide for setting up everything in Eclipse - f ...

Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...