css - CSS:FlexBox中的FlexBox

FlexBoxes出现问题-我想要


我想将页面的一个部分分为两部分（相同的高度），例如每个100像素
这些部分之一（第二部分）我想分为三个子部分（等高）100/3 = 33px


下面的代码导致：


第一部分的高度：80px
第二部分的高度：120px


重要提示：我知道，无需FlexBoxes即可实现-实际页面/用途有所不同。

但是我真的很想了解我在做什么错！

码：

body {
  height: 200px;
  width: 100% padding: 0;
  margin: 0;
}
.vbox {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  display: box;
  box-orient: vertical;
  box-align: stretch;
  min-width: 100%;
  min-height: 100%
}
.vbox > * {
  position: relative;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-align: stretch;
  display: box;
  box-orient: horizontal;
  box-align: stretch;
}
.boxFlex {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

<div class="vbox">
  <div id="a" class="boxFlex" style='background-color:#0f0'>Box A</div>
  <div id="b" class="boxFlex">
    <div class="vbox">
      <div id="b1" class="boxFlex" style='background-color:#600'>Box B1</div>
      <div id="b2" class="boxFlex" style='background-color:#900'>Box B2</div>
      <div id="b3" class="boxFlex" style='background-color:#C00'>Box B3</div>
    </div>
  </div>
</div>

最佳答案

尝试这个：

.vbox {
  display: flex;          /* Flex container */
  flex-direction: column; /* Display children in a column */
  min-height: 100%;
}
.boxFlex {
  height: 0;              /* Set initial height to 0 */
  flex-grow: 1;           /* Distribute remaining space */
}

body {
  height: 200px;
  width: 100%;
  padding: 0;
  margin: 0;
}
.vbox {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.boxFlex {
  height: 0;
  flex-grow: 1;
}

<div class="vbox">
  <div id="a" class="boxFlex" style='background-color:#0f0'>Box A</div>
  <div id="b" class="boxFlex">
    <div class="vbox">
      <div id="b1" class="boxFlex" style='background-color:#600'>Box B1</div>
      <div id="b2" class="boxFlex" style='background-color:#900'>Box B2</div>
      <div id="b3" class="boxFlex" style='background-color:#C00'>Box B3</div>
    </div>
  </div>
</div>

关于css - CSS:FlexBox中的FlexBox，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27911917/