html css css3 flexbox flex-grow

html - flex-grow no funciona en el diseño de columna



css css3 (1)

Todo en tu código está funcionando bien.

El único problema es que su contenedor flexible no tiene una altura especificada . Por lo tanto, la altura se resuelve en auto , es decir, la altura del contenido.

La propiedad flex-grow distribuye espacio libre en el contenedor. Sin espacio libre en su contenedor, flex-grow no tiene nada que hacer.

Pruebe este ajuste en su CSS:

.analysis { display: flex; flex-direction: column; height: 100vh; }

Esto le dice al contenedor flexible que sea la altura de la ventana gráfica. Ahora la altura del contenedor es más alta que la altura del contenido, y notará que flex-grow hace su trabajo.

Violín revisado

Obtenga más información sobre la height: auto valor predeterminado height: auto en la mayoría de los elementos .

Estoy tratando de hacer que views-cntnr ocupe cualquier espacio no utilizado por views-cntnr y views-cntnr divs. Para lograr esto, tengo una pantalla flexible configurada en la dirección de la columna. Luego configuro la propiedad flex-grow para views-cntnr en 1. No parece estar haciendo nada. JSFiddle

NOTA: No estoy seguro de si esto es importante, pero tengo algunas pantallas flexibles anidadas.

HTML

<script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <section class="analysis"> <div class="menubar"> <div class="view-ctrls text-center"> <div class="btn-group" role="group"> <button class="btn btn-default" ng-class="{''active-view'': active_views[0]}" ng-click="toggleView(0)">R-Theta</button> <button class="btn btn-default" ng-class="{''active-view'': active_views[1]}" ng-click="toggleView(1)">Cartesian</button> <button class="btn btn-default" ng-class="{''active-view'': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button> <button class="btn btn-default" ng-class="{''active-view'': active_views[3]}" ng-click="">Console</button> </div> </div> </div> <div id="views-cntnr"> <div class="r1"> <div id="v1" class="view">V1</div> <div id="v2" class="view">V2</div> <div id="v3" class="view">V3</div> </div> <div class="r2"> <div id="v4" class="view">V4</div> </div> </div> <div id="frame-ctrl-cntnr"> <div id="frame-num" class="frame-ctrl"># X</div> <div id="frame-range-cntnr" class="frame-ctrl"> <input type="range"> </div> </div> </section>

CSS

.analysis { display: flex; flex-direction: column; } /* MENUBAR */ .menubar { padding: 4px 0 4px; background-color: #eee; } /* menubar */ /* VIEWS */ #views-cntnr { display: flex; flex-direction: column; flex-grow: 1; } /* ROW 1 */ .r1 { display: flex; } .r1 .view { flex-grow: 1; border: black 1px solid; border-right: none; } .r1 .view:last-child { border-right: black 1px solid; } /* row 1 */ /* ROW 2 */ .r2 .view { border: black 1px solid; border-top: none; } /* row 2 */ /* views */ /* FRAME CTRL */ #frame-ctrl-cntnr { display: flex; } .frame-ctrl { border: black 1px solid; border-top: none; border-right: none; } .frame-ctrl:last-child { border-right: black 1px solid; } #frame-num { width: 50px; } #frame-range-cntnr { flex-grow: 1; padding: 4px; } /* frame ctrl */