Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
413 views
in Technique[技术] by (71.8m points)

html - flex-grow not working in column layout

I am trying to have the views-cntnr take up any space not used by views-cntnr and menubar divs. To achieve this, I have a flex display set to column direction. Then I set the flex-grow property for the views-cntnr to 1. Doesn't appear to be doing anything. JSFiddle

NOTE: Not sure if this matters but I have some nested flex displays going on.

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 */
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Everything in your code is working fine.

The only issue is that your flex container has no specified height. Therefore, the height resolves to auto, meaning the height of the content.

The flex-grow property distributes free space in the container. With no free space in your container, flex-grow has nothing to do.

Try this adjustment to your CSS:

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

This tells the flex container to be the height of the viewport. Now the height of the container is taller than the height of the content, and you will notice flex-grow doing its work.

Revised Fiddle

Learn more about the height: auto default on most elements.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...