IE11: Position absoluted DIV inside Flex container keeps out of the flow

ie11 flexbox overflow
ie11 flex-wrap not working
ie11 flexbox overlap
display: flex not working in ie11
ie11 flexbox width
css flex
ie11 flexbox issues
ie11 flex text not wrapping

I have a display:flex container that contains an image and a div, the image have a 100% width and the div have to be centered horizontally and vertically in the container (with flex properties). In order for the image to show on top of the image i'm using position:absolute. The problem is that on IE11 the positioned absolute div keeps showing out of the flow.

This is how it looks on IE11:

This is how it have to look (Chrome):

This is my HTML:

<div class="container shop-service">
    <img class="img-container" src="/_ui/responsive/theme-lambda/services/image-services.jpg">
    <div class="shop-service-content">
        <div class="shop-service-img">
        <img alt="ecommerce" src="/_ui/responsive/theme-lambda/services/ecommerce.svg"></div>
        <h2>E-commerce</h2>
        <p class="col-md-12">Poderá fazer os seus pedidos a qualquer hora do dia, 365 días por ano, de forma
        segura, ágil e confidencial.</p> <a class="btn btn-primary" href="/Open-Catalogue/c/1">Comprar agora</a>
    </div>
</div>

This is my CSS:

.shop-service {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 35px;
    padding-bottom: 35px;
    position: relative;
}

.shop-service img {
    width: 100%;
    height: auto;
}

.shop-service .shop-service-content {
    position: absolute;
    width: 100%;
    max-width: 400px;
    padding: 0 15px;
}

It is normal to meet the problem with flexbox and absolute position in IE.

A more recommended method is to use transform: translate() property.

You could combine Flexbox and transform: translate, as the latter does not impact the former.

I've made a sample on my side, and maybe you could refer to.

HTML.

    <div class="container shop-service">
    <img class="img-container" src="Images/test7.jpg" />
    <div class="shop-service-content">
        <div class="shop-service-img">
            <img alt="ecommerce" src="Images/test6.jpg" />
        </div>
        <h2>E-commerce</h2>
        <p class="col-md-12">
            Poderá fazer os seus pedidos a qualquer hora do dia, 365 días por ano, de forma
            segura, ágil e confidencial.
        </p> <a class="btn btn-primary" href="#">Comprar agora</a>
    </div>
</div>

CSS.

   .shop-service {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-top: 35px;
        padding-bottom: 35px;
        position: relative;
    }

        .shop-service .shop-service-content {
            position: absolute;
            width: 100%;
            max-width: 400px;
            padding: 0 15px;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        .shop-service img {
            width: 100%;
            height: auto;
        }

Result screenshot:result

html, Try adding a declaration of top:0; to your .shop-service .shop-service-content class. Starting with Pega 8.2, in pzbase-div-layouts and the pzbase-browser.css file, the display type of flex-grid-table-wrapper and flex-grid-tablecell-wrapper was changed to block to correct the pagination issue inside the modal wrapper. This ensures that widths are correctly calculated for pagination.

Try adding a declaration of top:0; to your .shop-service .shop-service-content class.

Flexbox IE 11 overflow issue · Issue #170 · philipwalton/flexbugs , Obviously not ideal say if you want to translate position of elements As you can see content of div.docs will overflow even if wrap is An element inside it's flex container was breaking out of the container and not wrapping. When using a container that is relatively positioned and has absolutely positioned elements inside of it, the absolutely positioned elements are taken out of the normal flow of the container and the container renders “empty”.

Try specifying a height for the parent container .shop-service

Flexbox Gets New Behavior for absolute-positioned Children, A previous version of the CSS Flexible Box Layout specification set the static fully out of flow and sets the static position based on align and justify properties. <div> <p>In Chrome 52 and later, the green box should be centered vertically  “Easy,” I thought. I whipped up a quickflex-direction: column; container with a fixed div for the heading content and an overflow div container with its overflow content under that. I tested in Chrome – looks great I tested in Firefox and Safari – looks great. I cleaned up the code, submitted the PR, and marked my ticket Ready for QA. Done.

SVG inside a tag is cut off on IE11 - css - html, SVG inside a tag is cut off on IE11 - css. img{ width: 100%; position: absolute; bottom: 0; } <div id="container"> <ul> <li><a href><div class="header">Xiao  Div boxes - position absolute, relative and fixed. View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers.

Decoding CSS Positioning: A Master Class with Paul O'Brien , And the options continue to expand, with the introduction of flexbox and grid the tricky subject of CSS positioning — from floats and relative, absolute and If something can be done in CSS, Paul will know how to do it. a small 50px fixed width and height red box to the right of the page. Find out more. This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

Backwards Compatibility of Flexbox, In this guide we will look at how well flexbox is supported in browsers, To create a flex container you would use display: box and there were a The two browsers you should still keep in mind for cross-browser “float and clear do not create floating or clearance of flex item, and do not take it out-of-flow. The problem is `#mail` need to be `position: relative` to set a context for the absolute positioning within. You can’t do this though because the container itself is set as absolute and so changing it would screw the whole thing up.

Comments
  • An absolutely-positioned child of a flex container is supposed to be out-of-flow. That's what absolute positioning does. w3.org/TR/css-flexbox-1/#abspos-items
  • Thanks @Ash Loudon, I tried it. The div gets into the top of the image but it won't centered the div neither vertically nor horizontally.