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.