Question

如何使用以下小提琴中的Chart div以垂直尺寸弯曲以使用可用高度？我知道之前已经问过这个问题，但我尝试过类似的问题，通常通过添加＆＃34; height：100％;＆＃34;到父容器，但这似乎没有帮助在这里，我认为我必须在其他地方使用flex CSS犯错误。

我试图让小提琴代表我们app的嵌套结构，因为我们在视图中有几个Angular控制器和指令。

这在Chrome中是必需的（虽然它也不适用于Firefox）。

https://fiddle.jshell.net/fb7yLs5c/

你可以在我的小提琴的底部看到我注释掉另一张图表，该图表位于破坏者的2个父div之外。这个确实将它的高度弯曲到完整的垂直空间，但是两个基于角度的div内的那个不会。

这个想法是图表有一个最小高度（＆＃34; flex-basis：400px;＆＃34;）但是如果窗口高于那个，它应该展开以填充所有可用的垂直高度。 / p>

Answer 1

flex包装器没有高度，当你将它设置为100％时，图表会展开，你会得到一个滚动，因为其他元素没有被考虑在内。这是做什么的将flexwrapper设置为100％高度
将除了图表之外的所有元素放在一个div中，其位置相对和高度约为30％
将图表的高度设置为70％
高高在上，以实现您的设计目标

Answer 2

您需要将容器的父级设为flex元素。并设置flex-direction:column然后您的代码将按照您的预期运行。

＆＃13;

html, body {
    height:100%;
    margin:0;
}
.app {
  height:100%;
}

.authorised-pane {
  height: 100%;
}

#flexWrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    min-height: 100%; /*height or min-height both work */
}

.version {
    padding:5px;
    color: #777777;
    font-size: 0.8em;
}

.panel-selection-style {
    background-color: green;
    display: flex;
    flex-basis: 32px;
}

.navButton {
  padding: 5px;
}

.instrumentControls {
    display: flex;
    background-color: orange;
    flex-basis: 32px;
}

.chartControls {
    display: flex;
    background-color: blue;
    flex-basis: 32px;
}

#chart {
    background-color: yellow;
    flex:50;
    display: flex;
    flex-basis:400px;
    height: 100%;
}
/*additional css*/
    .panelCtrl{
	  display: flex;
	  flex-direction: column;
	  flex: 1 1 auto;
    }
   .graphCtrl {
     display: flex;
     flex-direction: column;
	 flex: 1 1 auto;
     }

＆＃13;

<body ng-app="myApp">
<div ng-controller="MainCtrl" style="height:100%;">
    <div class="authorised-pane">
        <div ng-controller="PanelCtrl" style="height:100%;">
            <div id="flexWrapper">
                <span class="version">Version</span>
                <span class="panel-selection-style">
                <!-- Buttons for panel selection, ie. choose content -->
                  <button class="navButton">
                    Button 1
                  </button>
                  <button class="navButton">
                    Button 2
                  </button>
                  <button class="navButton">
                    Button 3
                  </button>
                  <button class="navButton">
                    Button 4
                  </button>
                  <button class="navButton">
                    Button 5
                  </button>
                </span>

                <div class="panelCtrl" ng-show="panelCtrl.tabs.graph" style="height:100%;">
                    <div class="graphCtrl" ng-controller="GraphCtrl" ng-include="graph.html" style="height:100%;">

                        <!--now inside ng-included graph.html-->
                        <span class="instrumentControls">
                      <button class="navButton">
                        Instrument Control 1
                      </button>
                      <button class="navButton">
                        Instrument Control 2
                      </button>

                            <!--contents of a replay toolbar directive-->
                      <span>
                      <button></button>
                      <button></button>
                      </span>
                      <span>
                      <button>></button>
                      <button>>></button>
                      </span>

                            <!--End of instrument controls -->
                    </span>

                        <!-- contents of chart directive -->
                        <div class="chartControls">
                            <button class="navButton">
                                ToB
                            </button>
                            <button class="navButton">
                                DoB
                            </button>
                        </div>

                        <div id="chart">
                            Chart should fill full height
                        </div>
                        
                      </span>

                    <!-- GraphCtrl end -->
                    </div>
                    
                <!-- ngShow end -->
                </div>

<!--                 <div id="chart" style="background-color: red;">
                    Commented out Chart here DOES fill full height
                </div> -->

            </div>
        </div>
    </div>
</div>
</body>

＆＃13;

以上示例https://fiddle.jshell.net/azs06/zL3tddyf/1/

是一个小提琴

嵌套在div中时，Flexbox div不会占用完整的可用高度

2 个答案: