I'm sorry. Redid a little.

Here is an example https://codepen.io/gluhovalexey/pen/OBjzGY

There is a header and an element of 3 parts, which includes ul lists left and right and a middle div with content located in flex-contaner

The essence of the question if you remove the item with lists of ul, then the width of the header will decrease. Ie if from the page of the site in which there is ul as an example go to another, where there are no lists, then the header of the site and other permanent elements will "jump" because of the resizing.

<div class="flex-container"> <div class="flex-row header"> <img src="https://d.radikal.ru/d17/1810/b9/7bd548daa75f.png"> <img src="https://d.radikal.ru/d17/1810/b9/7bd548daa75f.png"> <img src="https://d.radikal.ru/d17/1810/b9/7bd548daa75f.png"> </div> <div class="flex-row content"> <div class="left"> <ul> <li class=""><a href="" target="_blank">Пункт a</a></li> <li class=""><a href="" target="_blank">Пункт b</a></li> <li class=""><a href="" target="_blank">Пункт c</a></li> <li class=""><a href="" target="_blank">Пункт d</a></li> <li class=""><a href="" target="_blank">Пункт e</a></li> <li class=""><a href="" target="_blank">Пункт f</a></li> <li class=""><a href="" target="_blank">Пункт j</a></li> <li class=""><a href="" target="_blank">Пункт h</a></li> </ul> </div> <div class="center"> Какой то контент посередине </div> <div class="right"> <ul> <li class=""><a href="" target="_blank">Пункт 1</a></li> <li class=""><a href="" target="_blank">Пункт 2</a></li> <li class=""><a href="" target="_blank">Пункт 3</a></li> <li class=""><a href="" target="_blank">Пункт 4</a></li> <li class=""><a href="" target="_blank">Пункт 5</a></li> <li class=""><a href="" target="_blank">Пункт 6</a></li> <li class=""><a href="" target="_blank">Пункт 7</a></li> <li class=""><a href="" target="_blank">Пункт 8</a></li> </ul> </div> </div> </div>

Styles:

 .header { justify-content: center; flex-direction: row; flex-wrap: wrap; } .header img { width: 32%; margin: 1px; height: 100%; } .flex-container { display: flex; margin: 10px auto; max-width: 1300px; flex-wrap: wrap; flex-direction: column; } .flex-row { display: flex; margin-bottom: 50px } .content { flex-direction: row; width: 100%; } .content .left { flex: 2; width: 20%; } .content .center { flex: 4; justify-content: center; width: 60%; } .content .right { flex: 2; width: 20%; }
  • Changed the example so that it was clear that where and not to look. I read the question and the code for half an hour and did not understand what the problem was. - Air
  • Correct the question, nothing is clear. - E_K
  • Without styles we can’t help, in fact, the justify-content: space-between parent of the parent is justify-content: space-between Ruslan Semenov

2 answers 2

I think I understood what you wanted: https://codepen.io/Rusic/pen/EdvQee

The bottom line is that you need to limit the growth and reduction of flexs: briefly it is flex: 0 0 60% but earlier there were problems with this in order:

 flex-grow: 0 flex-shrink: 0 flex-basis: 60%
  • Rusla Semenov, did not help. the width of the .flex-container changes and pulls the elements inside it - Alex
  • Well, that's right, the parent is rubber, then set the dimensions not in% but in pixels, or rigidly set the size of the parent - Ruslan Semenov

Apparently this happens due to the fact that the content changes dynamically in the tag. From the very beginning it was necessary to say that everything is done in Angular. Created two static pages, one with a cap and columns, the other with a cap without columns, nothing jumps, the container width is always the same.

  • And the casket just opened ... All due to the fact that a scroll bar appeared on the right due to the page magnification horizontally. - Alexey