Div elements not visible after every 12th element?

We are rendering a list of items in below element form. Till 12th element all rows are visible but from 13th element onwards the element is not visible even though its present in the dev tools post inspect element.

<div class="fs-s text-black mx-0 px-3 my-1 row"> <div class="bom-row px-0 col-lg-3"> <div class="d-flex align-items-center"> <button class="MuiButtonBase-root MuiIconButton-root pl-0 pr-3 text-blue" tabindex="0" type="button" aria-label="delete"> <span class="MuiIconButton-label"> <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"> <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z" ></path> </svg> </span> <span class="MuiTouchRipple-root"></span> </button> <span class="text-primary hand-pointer"> <div class="d-flex flex-column"><span class="text-primary text-truncate jss216" title="10">10</span></div> </span> </div> </div> <div class="d-flex justify-content-center align-items-center px-1 text-primary hand-pointer col-lg-2"><span class="text-primary">+Add BOQ</span></div> <div class="d-flex justify-content-center align-items-center px-1 col-lg-1"> <div class="MuiFormControl-root MuiTextField-root text-center MuiFormControl-fullWidth"> <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"> <input aria-invalid="false" type="number" class="MuiInputBase-input MuiOutlinedInput-input jss215 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense" value="4" /> <fieldset aria-hidden="true" class="jss211 MuiOutlinedInput-notchedOutline" style="padding-left: 8px;"> <legend class="jss212" style="width: 0.01px;"><span>​</span></legend> </fieldset> </div> </div> </div> <div class="d-flex justify-content-center align-items-center col-lg-1">m3</div> <div class="d-flex justify-content-center align-items-center px-1 col-lg-1"> <div class="MuiFormControl-root MuiTextField-root text-center MuiFormControl-fullWidth"> <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"> <input aria-invalid="false" type="number" class="MuiInputBase-input MuiOutlinedInput-input jss215 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense" value="10" /> <fieldset aria-hidden="true" class="jss211 MuiOutlinedInput-notchedOutline" style="padding-left: 8px;"> <legend class="jss212" style="width: 0.01px;"><span>​</span></legend> </fieldset> </div> </div> </div> <div class="d-flex justify-content-end align-items-center pl-1 col-lg-2 pr-0 col-lg-2"> <div class="MuiFormControl-root MuiTextField-root text-center w-50 MuiFormControl-fullWidth"> <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"> <input aria-invalid="false" type="number" class="MuiInputBase-input MuiOutlinedInput-input jss215 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense" value="0" /> <fieldset aria-hidden="true" class="jss211 MuiOutlinedInput-notchedOutline" style="padding-left: 8px;"> <legend class="jss212" style="width: 0.01px;"><span>​</span></legend> </fieldset> </div> </div> </div> <div class="d-flex justify-content-center align-items-center px-2 col-lg-1"> <div class="w-100 basic-multi-select css-2b097c-container"> <div class="css-yk16xz-control"> <div class="css-1hwfws3"> <div class="css-1uccc91-singleValue">5</div> <div class="css-1g6gooi"> <div class="" style="display: inline-block;"> <input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-15-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;" /> <div style=" position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 12px; font-family: 'Open Sans'; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; " ></div> </div> </div> </div> <div class="css-0"> <span class="css-0"></span> <div aria-hidden="true" class="css-167ssso-indicatorContainer"> <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-19bqh2r"> <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" ></path> </svg> </div> </div> </div> </div> </div> <div class="d-flex justify-content-center align-items-center fs-m px-1 col-lg-1">42</div> </div> 

What could be the potential issue? Also, this issue is seen only in Google Chrome is up to date Version 89.0.4389.90 (Official Build) (64-bit)

submitted by /u/faizu07
[link] [comments]