Again I ran into the fact that it was necessary to use absolute positioning inside the flex container, I can't do anything with myself, I need it and that's it.
The problem, in short, is:
123
Actually, I already had such a problem. I was never given a solution (specifically to her), everyone just advised me to change my positioning style and, in the best case, to refuse the flex if you still use it.
Well, I did. But now he has come to the conclusion that the best solution for typesetting was the use of flex, but also without ab. pos. not to manage, but the problem postponed indefinitely arose again.
Also, last time, I kind of found out that this is a bug in FF, that they know about it and are going to fix it. But honestly, the devil knows when this will happen ...
Therefore, I am writing here again to finally figure out how to get around this problem if you need to use iron : use the flex property for a container and position nested elements via flex properties that also have absolute positioning.
For convenience, the codepen and the executable code below.

body { margin: 0; padding: 0; } body .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-flow: column nowrap; flex-flow: column nowrap; width: 200px; height: 500px; background-color: lightblue; } body .flex-container .flex-item { position: absolute; background-color: tomato; width: 100px; height: 300px; } 
 <div class="flex-container"> <div class="flex-item"></div> </div>

  • Give an example of markup where it should be bypassed. - Sasha Omelchenko
  • @SashaOmelchenko, I have gotten the whole screen. There is a picture with a frame, which should be in the center of the entire screen. And also there is a button that includes a block from the bottom of the picture, in which the description is given, so: nothing should move there, when the block is turned on, the picture should remain in the center as it was, and the block with info should be padded from below and create scrolling. One could do without ab. poses, yes? But even this is all I want to animate, so I can't do without it, I think ... - VostokSisters
  • maybe calc will help you - Jenyokcoder
  • @Jenyokcoder, I know about calc, I use it. But the devil knows, apparently again no one will be able to help and you will have to reposition everything again ... - VostokSisters
  • if the main motive of using flexbox in the overlay is vertical and horizontal alignment, then you can do without flexbox and align with the abs method. pos. - Sasha Omelchenko

0