使用flex调整VisNetwork以及部分的大小

问题描述

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

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

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

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

我尝试了100％的高度/宽度，看来它也将min-height视为max-height。

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

我想这可能与相对位置/绝对位置有关-但是，如果我将其删除，则图表会自动缓慢地自动调整大小，这看起来很奇怪。

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

对我来说，最终的目标是，如果右侧的某项展开，则自动调整图表的大小；如果较小（最小400px），则自动缩小图表的大小，除非我将图表强制为静态值。另外，如果我将板块/面板设置为更大的尺寸，我希望图表可以调整自身大小以匹配它。

现在看来我正在与flex战斗，以正确放置它。

解决方法

在从height：1000px的元素到包含该图的元素的路径上，有一个div元素，该元素不会传播高度。可以通过在该元素上设置display:flex来解决此问题，请参见以下代码中的CSS类fix1及其相应的html元素。

另一个css类fix2，说明如何使右侧面板自动调整其宽度（基于其内容的宽度和您选择的最小宽度，在此示例中为600px）a左侧面板占用剩余空间。

.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

html javascript vis.js