Does 'position: absolute' conflict with Flexbox?

Question

I want to make a div stick on the top of the screen without any influence to other elements, and its child element in the center.

 .parent {     display: flex;     justify-content: center;     position: absolute;   }

<div class="parent">    <div class="child">text</div>  </div>

When I add the position: absolute line, justify-content: center becomes invalid. Do they conflict with each other and, what's the solution?

EDIT

Thanks guys it's the problem of parent width. But I'm in React Native, so I can't set width: 100%. Tried flex: 1 and align-self: stretch, both not working. I ended up using Dimensions to get the full width of the window and it worked.

EDIT

As of newer version of React Native (I'm with 0.49), it accepts width: 100%.

Answer 1

No, absolutely positioning does not conflict with flex containers. Making an element be a flex container only affects its inner layout model, that is, the way in which its contents are laid out. Positioning affects the element itself, and can alter its outer role for flow layout.

That means that

• If you add absolute positioning to an element with display: inline-flex, it will become block-level (like display: flex), but will still generate a flex formatting context.

• If you add absolute positioning to an element with display: flex, it will be sized using the shrink-to-fit algorithm (typical of inline-level containers) instead of the fill-available one.

That said, absolutely positioning conflicts with flex children.

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.