Dissapearing chessboard when grandchild

[Perupaul]

I have a parent div holding another div holding a Chessboard that looks like this:

return (
  <div className="main-box" >
    <div>
      <Chessboard />
   </div>
  </div>
);

It will not render the chessboard on Firefox or Chrome (I haven't checked other browsers). If I remove the inside div, then it will render just fine:

return (
  <div className="main-box" >
    <Chessboard />
  </div>
);

This occurs when the CSS for "main-box" includes align-items: center;, otherwise it works fine. It will also break if I add margins to the inner div's CSS. I'm running react-chessboard 4.7.1 and vite 5.2.0.

[DevArches]

Have you tried giving the div that contains the chessboard a height/width? If not you could also just give the width to the board in the boardWidth prop.

[Clariity]

closing due to no activity