Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

css grid vs flexbox : why does css grid cause repaints and flexbox not

Tags:

html

css

flexbox

css-grid

I like very much css grid because of its simplicity. But there seems to be a performance issue with css grid that flexbox does not have.

I have implemented a two column full screen page both columns having a form with input box and a list of items with overflow-y:auto. One example where the left and right panel are implemented using flexbox and one where left and right panel are implemented with css grid.

this is the flexbox version : https://web-platform-wtfgmj.stackblitz.io/

and this is the css grid version : https://web-platform-wtfgmj.stackblitz.io/index2.html

Open the developper tools in chrome and enable paint flashing (tools/rendering has to be enabled). When typing in one of the input boxes, the css grid version will repaint all items in the list. The flexbox version does not have this problem.

I would like to understand why css grid repaints all items in the list when typing in the input box ? And can it somehow be avoided ?

Update : Seems to be problem with stackblitz... included as code snippets

Update 2: because it's little bit burried in comments: So I filed a bug report with chrome (bugs.chromium.org/p/chromium/issues/detail?id=1204446, upon suggestion of dgrogan) and they seem to confirm that it is a performance issue with chrome's current grid implementation. Apparently they are busy with a new implementation LayoutNGGrid which would solve the issue

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  box-shadow: none;
}
my-app {
  display: flex;
  flex-flow: column;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 0, 0, 0.1);
}

.header {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 1em;
  gap: 0.6em;
  align-items: flex-start;
  margin: 1em;
}

.itemspanel {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  min-height: 0;
}

.itemheader {
  flex: 0 0 auto;
}

.items {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  overflow-y: auto;
  min-height: 0;
}

.itemrow {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1em;
}
.itemrow > span:nth-child(1) {
  flex-basis: 30%;
  flex-grow: 1;
}
.itemrow > span:nth-child(2) {
  flex-basis: 70%;
  flex-grow: 1;
}

.itemrowgrid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 0 0.5em 1em 0.5em;
}

.panels {
  flex: 1 1 100%;
  display: grid;
  grid-template:
    "left right" 1fr
    / 1fr 2fr;
  gap: 1em;
  min-height: 0;
}
.panelleft {
  display: flex;
  flex-flow: column;
  grid-area: left;
  min-height: 0;
}
.panelright {
  display: flex;
  flex-flow: column;
  grid-area: right;
  min-height: 0;
}
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <my-app ng-version="11.0.8">
    <div class="panels">
      <div class="panelleft">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-touched ng-dirty">
          <label >Search:</label><input  type="text" name="name" ng-reflect-name="name" ng-reflect-model="00000" class="ng-valid ng-touched ng-dirty"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
      <div class="panelright d2">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-dirty ng-touched">
          <label >Search:</label><input  type="text" name="name1" ng-reflect-name="name1" ng-reflect-model="0000" class="ng-valid ng-dirty ng-touched"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
    </div>

  </my-app>
</body>

</html>

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  box-shadow: none;
}



my-app {
  display: flex;
  flex-flow: column;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 0, 0, 0.1);
}

.header {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 1em;
  gap: 0.6em;
  align-items: flex-start;
  margin: 1em;
}

.itemspanel {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  min-height: 0;
}

.itemheader {
  flex: 0 0 auto;
}

.items {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  overflow-y: auto;
  min-height: 0;
}

.itemrow {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1em;
}
.itemrow > span:nth-child(1) {
  flex-basis: 30%;
  flex-grow: 1;
}
.itemrow > span:nth-child(2) {
  flex-basis: 70%;
  flex-grow: 1;
}

.itemrowgrid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 0 0.5em 1em 0.5em;
}

.panels {
  flex: 1 1 100%;
  display: flex;
  flex-flow: row;
  min-height: 0;
}
.panelleft,
.panelright {
  display: flex;
  flex-flow: column;
  min-height: 0;
}

.panelleft {
  flex: 1 1 100%;
}
.panelright {
  flex: 1 1 200%;
}
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
  <my-app ng-version="11.0.8">
    <div class="panels">
      <div class="panelleft">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-touched ng-dirty">
          <label >Search:</label><input  type="text" name="name" ng-reflect-name="name" ng-reflect-model="00000" class="ng-valid ng-touched ng-dirty"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
      <div class="panelright d2">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-dirty ng-touched">
          <label >Search:</label><input  type="text" name="name1" ng-reflect-name="name1" ng-reflect-model="0000" class="ng-valid ng-dirty ng-touched"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
    </div>

  </my-app>
</body>

</html>
like image 211
rekna Avatar asked Apr 19 '21 05:04

rekna

People also ask

Can you use both CSS grid and flexbox?

Both allow us to create complex layouts that were previously only possible by applying CSS hacks and/or JavaScript. Flexbox and CSS Grid share multiple similarities and many layouts can be solved with both.

Does CSS grid replace flexbox?

Mostly No. Grid is much newer than Flexbox and has a bit less browser support. That's why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

Is CSS grid better than flexbox?

If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.

Is grid slower than flexbox?

The real difference between using Flexbox and CSS Grid is in the amount of code: The code for creating a complex layout in Flexbox is more complex, dispersed and time-consuming, while that created with the Grid is much faster, tidier and simpler.

What is the difference between CSS grid layout and CSS Flexbox?

The CSS Grid Layout is a two-dimensional grid-based layout system with rows and columns. It is useful in creating more complex and organized layouts. To define a grid container, you will have to pass a display: grid property to your element. The CSS Flexbox is a one-dimensional layout.

What is the use of CSS Flexbox?

Flexbox: The CSS Flexbox offers a one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes. To get started you have to define a container element as a grid with display: flex;

What is flexbox and grid?

After decades of hacking together complex layouts for web pages using tables, absolute positioning, floats, and other mediocre layout systems, Flexbox and Grid significantly clean up your layout code and make it easier to understand. Ultimately, it allows you to focus on building a great user experience instead of making the basic layout work.

What is CSS grid and how does it work?

CSS Grid focuses on precise content placement. Each item is a grid cell, lined up along both a horizontal and a vertical axis. If you want to accurately control the position of items within a layout, CSS Grid is the way to go. The W3 docs of the Grid module assert:

1 Answers

I've been able to reproduce the problem locally (almost at least). As you can see in the following image, in my browser (Chromium v92.0.4488.0) only an area on the far right of the column is repainted - exactly the area where the scrollbar will be displayed when it is used.

Using Firefox (v88.0) or Safari (v14.0.3), on the other hand, neither in the Flexbox nor the grid example anything other than the input is being repainted.

Since you don't use absolute values for the height of the containers, I suspect it happens due to the calculation of the height and whether the scrollbar needs to be displayed. Chrome seems to behave differently here than other browsers.

A simple fix seems to be to define an absolute height for the containers (vh, although it's a relative unit, seems to work too):

.panelleft,
.panelright {
  height: 100vh;
}
like image 90
coreuter Avatar answered Oct 19 '22 23:10

coreuter
Sign in to Comment

Related questions

Change orientation to vertical, table rows HTML + CSS
Android monospace space (&nbsp;) width is different than character width
Why is my debug msg not being written into my page?
Canvas .toDataURL() returns partially corrupted image
SVG images loading slow or last in site
ionic 3 auto adjust layout on the grid
Why is a browser not always finishing rendering of the preceding HTML, before executing JavaScript?
Angular 5 DomSanitizer with Hyperlinks
Fully responsive items with CSS grid and auto-fit minmax
Remove blur effect from background image on mousemove
HTML CSS print out POS size?
Viima JQuery Comments - GetUsers(Pinged users) displaying incorrectly in partialview
How to debug responsive images' srcset & sizes, like which media condition applies?
Create new iframe and load content synchronously
Access DOM content of browser within Android runtime
Using CSS, how to "tightly" align "A" to the bottom/end of "B" where "B" has unknown width and text wrapping
Why is overflow-y: hidden creating a horizontal scroll bar in my flex layout?
ARIA make reader read non-focused element content
How can I achieve a zoom out to another image transition effect
Bootstrap 4 nav side in not smooth/jerky/glitchy

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!