相关疑难解决方法(0)

Chrome/Safari不会填充100%高度的flex父级

我想要一个具有特定高度的垂直菜单.

每个孩子必须填写父母的高度并且具有中间对齐的文本.

孩子的数量是随机的,所以我必须使用动态值.

Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.

为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.

我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.

这个问题有解决方法吗？
或者是否有一种不同的技术可以使所有.item填充父级的高度与文本垂直对齐到中间？

这里的示例jsFiddle,应该在Firefox和Chrome中查看

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div> …

Run Code Online (Sandbox Code Playgroud)

css webkit google-chrome css3 flexbox

Ric*_*eda

2016 07-11

204
推荐指数

4
解决办法

12万
查看次数

Chrome会忽略列布局中的flex-basis

我遇到了麻烦的Chrome要注意的柔性基础部分flex: 1 1 25%的flex-direction: column布局.它在row布局中工作正常.

下面的代码片段演示了这个问题:黄色,蓝色和粉红色条形基于柔性基础50px,25%和75%,在列和行弯曲方向上都显示.

如果您在Firefox(或IE11或Edge)中运行它,列和行都按预期划分区域:

但是如果你在Chrome(47)或Safari(9.0.3)中运行它,左边的列布局似乎完全忽略了flex-basis - 条形的高度似乎与flex-basis无关:

左右之间的唯一区别是flex-direction.

.container {
  width: 400px;
  height: 200px;
  display: flex;
  background: #666;
  position: relative;
}

.layout {
  flex: 1 1 100%; /* within .container */
  margin: 10px;
  display: flex;
}

.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}

.exact {
  flex: 1 1 50px;
  background: #ffc;
}
.small {
  flex: 1 1 25%;
  background: #cff;
}
.large {
  flex: …

Run Code Online (Sandbox Code Playgroud)

css webkit google-chrome css3 flexbox

med*_*nds

2016 04-05

4
推荐指数

1
解决办法

6852
查看次数