Search code examples
cssgoogle-chromeflexboxversionmargin

Style bugs with new version of chrome 84.0.4147.105

For chrome version 84.0.4147.105 =>

  • Element goes up in flex container if i setup for container display: block works fine.

This is style for container =>

    position: absolute;
    left: 1254.57px;
    top: 114.8px;
    width: 179.707px;
    height: 378px;
    background: url(assets/images/test.png) 0% 0% / 100% 10% no-repeat rgb(35, 68, 43);
    padding-top: 43.2px;
    font-family: helveti5;
    font-size: 2.3vmin;
    overflow: scroll;
    box-sizing: content-box;
    text-shadow: rgb(0, 0, 0) 0px 5px 3px;
    display: flex;
    flex-direction: column;

My style element inside container =>

<div id="123" style="display: inline-table;width:97%;" class="t123"><p style="width:100%;height:6%;
                                  color: #ffffff;
                                  background: #1c2d20;
                                  text-shadow: 0px 5px 3px #000000;
                                  margin: 0;
                                  padding-top: 2.7%;
                                  line-height: 2;
                                  margin-bottom: 0;
                                  text-decoration: none;
                                  ">SOMETHING</p> <p style="width:100%;height:6%;margin-bottom:0;"></p> <p mark="Red" evwin="10" style="padding:4px 2px 4px;height:6%;flex:1;font-size: 1.85vmin;border:solid #71c940 1px;min-width:43%;
                           margin-bottom: 1px;
                           color: white;
                           background: #ff2614;">Red (2) </p><p style="background:#1c2d20;width:100%;height:6%;margin-top:5%;margin-bottom:5%;color:white;"> something </p><p style="background:#1c2d20;width:100%;height:6%;margin-top:5%;margin-bottom:5%;color:white;"> SOmething </p></div>

Any suggestion for fix without exceptions , detect browser ver etc ?

Solution

  • I had the same issue with this Chrome version and for me the solution was to remove min-height in the child element.

    Other variant is to switch style.display from flex to block for parent.