Flexbox layout vastly different across browsers?

Question

Working on a layout for an internal dashboard, and the layout is completely different on Chrome/IE and Firefox. I'm no CSS expert so any help would be appreciated.

https://jsfiddle.net/k8t26zmc/1/

main {
  padding-top: 0.1vh;
  margin: 10px;
  width: 50%;
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}

.child {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border: 1px solid blue;
}

.grid {
  display: grid;
  grid: repeat(2, 1fr) / repeat(3, 1fr);
  padding: 10px;
  text-align: center;
}

<body>
  <main>
    <div class="container">
      <div class="child">
        <div class="grid">
          <div>
            <p>Planned</p> 4</div>
          <div>
            <p>Actual</p> 0</div>
          <div>
            <p>Ratio</p> 0.00%</div>
          <div>
            <p>Orders</p> 0</div>
          <div>
            <p>Books</p> 0</div>
          <div>
            <p>Value</p> £0.00</div>
        </div>
        <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
      </div>
      <div class="child">
        <div class="grid">
          <div>
            <p>Planned</p> 4</div>
          <div>
            <p>Actual</p> 0</div>
          <div>
            <p>Ratio</p> 0.00%</div>
          <div>
            <p>Orders</p> 0</div>
          <div>
            <p>Books</p> 0</div>
          <div>
            <p>Value</p> £0.00</div>
        </div>
        <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
      </div>
    </div>
  </main>
</body>

Firefox

Chrome/IE

Also in the actual layout, occasionally the SVGs are different sizes, even thought the parent and everything else are the same (again only on chrome)

Firefox

Chrome/IE

EDIT: Forget to mention that the mobile layout has them formatted vertically rather than the above images so anything fixed is not ideal.

Temani Afif · Accepted Answer · 2019-03-11T11:40:37.420

I think you are facing some unwanted behavior due to nesting flex container which is known to create some issue in some particular cases.

Adding width:100% (or any value strating from 50%) to child element will fix the issue. You will force them to be as wide as possible then they will shrink equally to fit the container. You can also get rid of the height:100% which is useless since the elements are stretched by default.

I have also added min-width:0 to be sure they will shrink past content size:

main {
  padding-top: 0.1vh;
  margin: 10px;
  width: 50%;
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}

.child {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  border: 1px solid blue;
  min-width:0;
}

.grid {
  display: grid;
  grid: repeat(2, 1fr) / repeat(3, 1fr);
  padding: 10px;
  text-align: center;
}
* {
  box-sizing:border-box;
}

<body>
  <main>
    <div class="container">
      <div class="child">
        <div class="grid">
          <div>
            <p>Planned</p> 4</div>
          <div>
            <p>Actual</p> 0</div>
          <div>
            <p>Ratio</p> 0.00%</div>
          <div>
            <p>Orders</p> 0</div>
          <div>
            <p>Books</p> 0</div>
          <div>
            <p>Value</p> £0.00</div>
        </div>
        <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
      </div>
      <div class="child">
        <div class="grid">
          <div>
            <p>Planned</p> 4</div>
          <div>
            <p>Actual</p> 0</div>
          <div>
            <p>Ratio</p> 0.00%</div>
          <div>
            <p>Orders</p> 0</div>
          <div>
            <p>Books</p> 0</div>
          <div>
            <p>Value</p> £0.00</div>
        </div>
        <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
      </div>
    </div>
  </main>
</body>

You can also get rid of the inner flex container and simplify the code like below:

main {
  padding-top: 0.1vh;
  margin: 10px;
  width: 50%;
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}

.child {
  width: 100%;
  border: 1px solid blue;
  min-width: 0;
}

.grid {
  display: grid;
  grid: repeat(2, 1fr) / repeat(3, 1fr);
  padding: 10px;
  text-align: center;
}

svg {
  display: block;
  width: 100%;
}

* {
  box-sizing: border-box;
}

<main>
  <div class="container">
    <div class="child">
      <div class="grid">
        <div>
          <p>Planned</p> 4</div>
        <div>
          <p>Actual</p> 0</div>
        <div>
          <p>Ratio</p> 0.00%</div>
        <div>
          <p>Orders</p> 0</div>
        <div>
          <p>Books</p> 0</div>
        <div>
          <p>Value</p> £0.00</div>
      </div>
      <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
    </div>
    <div class="child">
      <div class="grid">
        <div>
          <p>Planned</p> 4</div>
        <div>
          <p>Actual</p> 0</div>
        <div>
          <p>Ratio</p> 0.00%</div>
        <div>
          <p>Orders</p> 0</div>
        <div>
          <p>Books</p> 0</div>
        <div>
          <p>Value</p> £0.00</div>
      </div>
      <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
    </div>
  </div>
</main>

score -3 · Answer 2 · answered Mar 11 '19 at 12:09

Much as I understand that Temani`s answer is to thew point of the question, I would second Danill with the grid approach here. It is as cool as flex (which is why you want to have a look at it) and for laying out a macro structure arguably even better. And of course, you can combine it with the flex (utilized on the more "micro" level).

Flexbox layout vastly different across browsers?

2 Answers2