Javascript 使用flex沿截面调整VisNetwork的大小

我已经在flex部分中定位了Vis网络

您可以在这里看到完整的代码：（尝试向下移动元素）

问题是，每当我尝试手动将节的高度调整为“1000px”或任何值时，图表的高度都保持不变。当我将高度直接推到图表部分时，可以正确调整大小。但是，当我在右侧放置扩展主部分的内容，并且图表保持默认大小时，这是有问题的。我尝试在vis.js中使用autosize，但似乎没有任何影响

var选项={
“互动”：{
“悬停”：正确
},
“自动调整大小”：真
};

我尝试了100%的高度/宽度，似乎它也将最小高度视为最大高度

.diagram{
最小高度：400px；
宽度：100%；
身高：100%；
边框：0px固体未设置；
}
.vis网络：焦点{
大纲：无；
}

我猜它可能与相对/绝对位置有关，但如果我移除它，它会自动缓慢地调整大小，这看起来很奇怪

<div class="diagram" style="position:relative">
    <div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>

我的最终目标是，如果右侧的某个对象扩展，则图表会自动调整大小，如果该对象较小（最小400px），则图表会自动缩小，除非我强制图表为静态值。此外，若我将截面/面板设置为更大的值，我希望图表能够调整自身大小以匹配它

---

现在，我似乎正在努力让flex正确定位它。

在从高度为1000px的元素到包含图表的元素的路径上，有一个div元素不传播高度。 这可以通过在该元素上设置

display:flex

来解决，请参见下面代码中的css类

fix1

及其对应的html元素

另一个css类，

fix2

，显示了如何使右面板自动调整其宽度（基于其内容的宽度和您选择的最小宽度，本例中为600px），并使左面板占据剩余空间

.fix1 {
    display: flex;
    flex-direction: column;
}
.fix2 {
    flex-basis: auto !important;
    min-width:600px;
}

---

您可以看到完整的代码

很好-谢谢。据我所知，这似乎对其他任何事情都没有影响。我已经将fix1添加到defaultSection类中。实际上，它对其他方面有影响。当您将修复添加到其他情况时：事情会受到影响。请注意类Section-ihc5826，它是一个副本，请注意左侧的Section header是如何完全混乱的。您能更详细地解释一下Section header是如何混乱的吗？我注意到左部分标题和其他标题之间的以下区别：它是垂直方向的，没有圆角，并且具有不同的文本颜色。我将您的fix1应用于上面的代码笔。请现在检查。我为每个部分都添加了它（这是我的目标——不必自定义它）。第一部分坏了，其余的都可以。这是你想要的设计吗？

.fix1 {
    display: flex;
    flex-direction: column;
}
.fix2 {
    flex-basis: auto !important;
    min-width:600px;
}

<div class="defaultSection overflowHidden">
    <div class="defaultSectionHead">
        <div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a>&nbsp;<a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
    </div>
    <div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
        <div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
            <div class="defaultSection overflowHidden fix1">
                <div class="defaultSectionHead">
                    <div class="defaultSectionText"><a> </a>&nbsp;<a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
                </div>
                <div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
                    <div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
                        <div class="diagram" style="position:relative">
                            <div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flexPanel overflowHidden defaultPanel fix2">
                <div></div>
            </div>
        </div>
    </div>
</div>