How can I center component with Flexbox with "fixed width"-CodePudding

I´m making my component with the next code (App.component, the highest parent):

app.component.html

    <div >
  <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;
}

This is my "app-feed":

feed.component.html

<div >
    <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;
}

But when I refresh the page, the container moves a little. How can I can make my component "Feed" stays in the center of my flexbox without moving, stay fixed (with a fixed width)

Live demo: https://gifyu.com/image/Sw9fN

Buf if i remove the "h4" tag in feed.component.html, the container not moves, as i want to expect from the another approach.

Expected result (with h1 tag): https://gifyu.com/image/Sw9fK

I´m using Angular 11

CodePudding user response：

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

The initial shifting can be prevented

Found out that the problem happens when the page has no scrollbar but you expand some element and the browser shows the scrollbar.

CodePudding user response：

{

    <div >
        <div  style="width:400px; background-color: pink;"></div>
        <div style="flex: 0 0 600px;">
          <app-feed>
            <div >
                <div >
                    <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 >
        <div>hello this is Ravi</div>
    </div>

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

} using this code you can edit your post as like in link(which is sended 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;
}