相关疑难解决方法(0)

我正在尝试填充flexbox内的flex项目的垂直空间.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

这是JSFiddle

flex-2-child 没有填写所需的高度,除非在以下两种情况下:

1. flex-2 高度为100%(这很奇怪,因为弹性项目默认为100%+ Chrome中存在错误)
2. flex-2-child 有一个绝对的位置也很不方便

这在目前的Chrome或Firefox中不起作用.

我在使用flexbox列时遇到麻烦,因为flex'd元素的子元素不会以height百分比形式响应.我只在Chrome中检查过此内容,据我所知,这只是Chrome的问题.这是我的例子:

HTML

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

CSS

.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
}

.flex-child{
  background:red;
  height:100%;
  width:100%;
  display:block;
}

.static{
  background:green;
  width:100%;
  height:5rem;
}

这是CodePen.

我想要它,所以红色.flex-child填充蓝色.flex.为什么不起作用height:100%？

我有一个嵌套的flexbox设置的小例子:http://jsfiddle.net/ThomasSpiessens/MUrPj/12/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent">
        <div class="box fullSize">
            <div class="boxHeader moregreen">INNER HEADER</div>
            <div class="boxContent red">CONTENT CONTENT CONTENT</div>
            <div class="boxFooter moreblue">INNER FOOTER</div>
        </div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>

在此示例中,以下内容适用:

• CSS'box'类使用flexbox属性,只有boxContent被告知增长.有关特定的CSS属性和值,请检查小提琴.
• 'fullSize'只是将宽度和高度都设置为100%.

当您使用Firefox和Chrome检查这个小提琴时,您会得到不同的结果.在Firefox中它做了我想它必须做的事情,这是拉伸内部.boxContent.但是在Chrome中,内部.boxContent不会被拉伸.

有没有人知道如何在Chrome中制作内容？也许是一个缺少的特定webkit属性？