How to have Cytoscape.js (within React) using the full container space and aligning labels

Question

I'm including a graph, drawed with Cytoscape on my React(indeed Gatsby)-built page. I use Bulma CSS framework. When I'm using it on the page it works outside of any column/box. When I include this graph in a column > box, it does not work well.

Case one: no height => it does not appear at all (but it's visible on the HTML) Case two: if I set a height, it appears but I see only the node labels, whereas the nodes themselves are on the right, and I need to drag and drop the Cytoscape area to access the node. Additionally, as soon as I move a node, the label attached to this node goes to the right place (just above the node).

This one work:

<div>
 <CytoscapeComponent elements={elements} layout={mylayout} 
  style={ { height: '300px' } }/>
</div>

This part doesn't work as I want:

      <div className="column">
        Second column - below a box for the company chart
        <div className="box" style={ { height: '600px'} }>
          
          <div>
            <CytoscapeComponent 
              cy={
                (cy) => 
                (cy.fit()) // no impact so far
              }
              elements={elements} layout={mylayout} 
              style={ { height: '599px', backgroundColor:'green'}}
              zoom={1 /* no impact from the zoom*/}
              stylesheet={stylesheet/*no impact...*/}

                />
          </div>
          
        </div>
      </div>