相关疑难解决方法(0)

我在使用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%？

我有两个高度为90%的div,但显示效果不同.

我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.

有人能解释我为什么会遇到这个问题吗？

以下是我的代码:

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
</div>

我想在父项中包含一个flex项,以便它不会溢出父项之外.只有弹性项目应该有一个滚动条(如果需要).

我的样式在Chrome和IE11中运行良好,但不适用于Firefox.我怀疑在flex-basis设置的样式的解释上有所不同#wrapper,但我无法弄清楚为什么Firefox以不同的方式呈现.

这是Chrome中所需的渲染:

这是Firefox中发生的事情:

我可以通过添加来应用"胶带"修复#left { height: calc(100vh - 50px); },但如果可能的话,我更愿意确定实际的不一致性.

body, html, h1 {
  padding: 0;
  margin: 0;
}
header {
  background-color: rgba(0, 255, 255, 0.2);
  height: 50px;
}
#main {
  height: 100vh;
  background-color: rgba(0, 255, 255, 0.1);
  display: flex;
  flex-flow: column;
}
#wrapper {
  display: flex;
  flex-grow: 2;
  flex-basis: 0%;
}
#left {
  overflow-y: scroll;
  background-color: rgba(0, 255, 255, 0.2);
  width: 30%;
}
.box {
  margin: 5px 0;
  height: 50px;
  width: 100%; …

我试图justify-content: flex-end;在 IE11 中为溢出隐藏的 DIV 内容工作，但没有成功。

在尝试了几种组合后，我创建了一个在 Chrome 中有效但在 IE11 中无效的最小片段：

.token-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  box-shadow: 1px 1px 2px 1px silver inset;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  //align-content: flex-end;
}
.token {
  display: inline-block;
  border: 1px solid silver;
  margin: 1px 3px 0 0;
  border-radius: 4px;
  height: 19px;
  padding: 0 3px;
}

<div class="token-container">
  <div class="token">
    <span class="token-text">t-bone</span>
  </div>
  <div class="token"><span class="token-text">hamburger</span></div>
  <div class="token"><span class="token-text">pancetta</span></div>
  <div class="token"><span class="token-text">leberkäs</span></div>
  <div class="token"><span class="token-text">bacon</span></div>
</div> …

我有一个非常好的可调节界面与flexbox一起工作,用户可以调整面板的高度和宽度.但是,我想更改当前使用像素的面板高度来使用百分比,因此当他们更改一个面板时,其他面板会流动.

一切都适用于宽度,但当我使用高度%它会打破.

这是一个显示破碎%的小提琴.

http://jsfiddle.net/59trW/1/

这个小提琴在红色元素上设置了50%的高度,但根本不可见.

这是css

.outer-flex {
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    display: flex;
    -webkit-box-align: stretch;
    flex-direction: row;
}
.left-panel {
    width: 30px;
    background-color: #5eddd8;
}

.flex {
    display: flex;
    flex:1;
    -webkit-box-align: stretch;
    flex-direction: column;
    background-color: #64b92a;
    min-height: 1px;
}

.fixed {
    height: 20px;
    background-color: #ecf0f1;
}
.top-box {
    height: 30%;
    background-color: red;
}

.bottom-box {
    flex: 1;
}

和HTML

    <div class="outer-flex">
    <div class="left-panel">
      this is ok.
    </div>
   <div class="flex">
       <div class="fixed">doesn't move</div>
      <div class="top-box">top box</div> …