使用 flex 调整 VisNetwork 和部分的大小

Question

我已将 Vis-network 放置在 flex 部分中。

您可以在此处查看完整代码：https://codepen.io/MadBoyEvo/pen/XWdgzoB（尝试向下移动元素）

问题是每当我尝试手动将部分的高度调整为“1000px”或图表高度保持不变的任何值时。当我将高度直接推到图表部分时，会正确调整大小。但是当我在右侧放一些东西来扩展主要部分时，这是有问题的，并且图表保持默认大小。我尝试对 vis.js 使用自动调整大小，但似乎没有任何影响。

var options = {
    "interaction": {
        "hover": true
    },
    "autoResize": true
};

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

.diagram {
    min-height: 400px;
    width: 100%;
    height: 100%;
    border: 0px solid unset;
}

.vis-network:focus {
    outline: none;
}

<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">
                <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">
                <div></div>
            </div>
        </div>
    </div>
</div>

我猜它可能与位置有关 relative/absolute - 但如果我删除它，图表会自动缓慢地自动调整大小，这看起来很奇怪。

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

我的最终目标是让图表在右侧展开时自动调整大小，在图表变小时自动缩小（最小 400 像素），除非我将图表强制设置为静态值。此外，如果我将 sections/panels 设置为更大的值，我希望图表调整自身大小以匹配它。

现在看来我正在努力调整 flex 以正确定位它。

Answer 1

在从具有 height:1000px 的元素到包含图表的元素的路径上，有一个不传播高度的 div 元素。这可以通过在该元素上设置 display:flex 来解决，请参阅下面代码中的 css class fix1 及其对应的 html 元素。

另一个 css class、fix2 展示了如何使右侧面板自动调整其宽度（基于其内容的宽度和您选择的最小宽度，在本例中为 600px）a 让左侧面板占据剩余的 space.

.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>

你可以看到完整的代码here

使用 flex 调整 VisNetwork 和部分的大小

Resize VisNetwork along with section using flex

html

javascript

css

vis.js