Elements to spread equally with space over parent width - Angular Flexlayout responsive

Question

I want to render 3 div squares: div-left, div-middle, and div-right (each of width 300px) to be spread across the width of the parent div main-section which should be 1300px if screen>1300px and to shrink if the screen<1300px.

The 3 squares should be positioned as follows: starting with 0px (the left side of div-left) until 1300px (the right side of div-right) and with equal spaces between the squares.

main-section is enclosed in the parent div full-width-section which takes the full width of the screen so that it is not empty in case the screen>1300px;

The idea is I don't want the main-section to be larger than 1300px when the screen>1300px but to shrink if the screen<1300px. By using flex layout I wanted the 3 squares to be separated equally when the screen shrinks, making it responsive.

Also main-section should be in the center of full-width-section and take 1300px if screen>1300px.

At this moment I managed to position main-section in the center but does not take 1300px if screen>1300px, it only takes the sum of the square widths.

HTML (divs colored for easier view):

<div class="full-width-section" fxLayout fxLayoutAlign="space-evenly stretch">
  <div class="main-section" fxLayout fxLayoutAlign="space-between center">
    <div class="div-left" style="background: #df1313;width: 300px; height: 300px;"></div>
    <div class="div-middle" style="background: #4826df;width: 300px; height: 300px;"></div>
    <div class="div-right" style="background: #25ca57;width: 300px; height: 300px;"></div>
  </div>
</div>

CSS:

.full-width-section {
    width: 100%;
    background: #4bd0f1;
}

.main-section {
    max-width: 1300px;
    background: #e2d959;
}

link to demo. I would appreciate any help.

Answer 1

If you remove the flex layout directives from the outer wrapper, then you should get the desired behavior. I have modified your example, it can be found here