Javascript 如何使Cytoscape.js画布尊重其父级'；s位置

我有一个React组件，一旦从服务器获取了一些数据，它就会呈现一个Cytoscape-dagre图。它似乎呈现的画布占据了父对象的右半部分。调用

cy.center（）

和

cy.fit（）

将图形本身居中并与父div相匹配，但仅显示一半的可视化效果，因为包含的画布一半离开屏幕

设置以下CSS：

position: absolute;
left: 0;
right: 0;

在容器上，就像所有在线示例一样，将使画布居中，但会中断文档流。它也不能解决一半大小的问题

JSX：

  if (moduleStructure) {
    return (
      <div
        id="cy-module-structure"
        style={{
          position: "absolute",
          left: 0,
          top: 0,
          height: "500px",
          width: "1500px",
          display: "block",
        }}
      />
    );
  }

最后是父JSX：

      <div className="top-flex"> // flex-direction: row: 
        <Diagram /> // Cytoscape component
        <div className="basic-info">
          <H3>TEXT</H3>
          <small>INFO</small>
        </div>
      </div>

//弹性方向：行：
//细胞景观成分
正文
信息

理想情况下，图形应该占据父div的全部宽度。在屏幕截图中，您可以看到上述效果

（1）您的调整大小和配合顺序颠倒。如果以后要调整大小，那么调整大小是没有意义的。拟合发生在可用边界上

（2） 确保仅在

componentDidMount（）之后装载Cytoscape

---

（3）

容器

必须类似于

位置：相对

或

位置：绝对

（绝对不是

位置：静态

），以便可以相对于

容器

定位

容器的子级。默认情况下，Cytoscape.js将设置
位置：相对
，因此除非您覆盖它，否则它的设置是合理的。
问题是应用了更高级别的样式
文本对齐：居中
。删除应该正确对齐。我有一个确切的问题，对我来说，应用的更高级别样式是
text align:center
。删除正确对齐的内容。这就是问题所在-将顶级样式应用于文本对齐中心的
.App
。非常感谢。如果你加上这个作为回答，我会接受的。
      <div className="top-flex"> // flex-direction: row: 
        <Diagram /> // Cytoscape component
        <div className="basic-info">
          <H3>TEXT</H3>
          <small>INFO</small>
        </div>
      </div>