相关疑难解决方法(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中不起作用.

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

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

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

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

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

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

1. 这个问题有解决方法吗？
2. 或者是否有一种不同的技术可以使所有.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;
}

<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> …

我有两个高度为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>

我有一个在 Firefox 和 IE 中完全正常工作的以下布局：

不幸的是，它在 Chrome 中被破坏了，即深蓝色容器被折叠，即使它的高度是其父容器的 100%：

我尝试过这种方法，但没有任何运气。有什么想法如何在 Chrome 上修复此问题而不在其他浏览器中破坏它吗？

html,
body {
  height: 97%;
  margin: 0;
  padding: 0;
}

div {
  border: 10px dotted teal;
}

.container {
  display: flex;
  border-color: tomato;
  height: 100%;
}

.row {
  flex-flow: row;
}

.column {
  flex-flow: column;
}

.item1 {
  flex: 1;
}

.item2 {
  flex: 2;
}

.item3 {
  flex: 3;
}

.c1 {
  border-color: gold;
}

.c2 {
  border-color: darkblue;
}

<div class="container">
  <div class="item3">
    <div …

我有这样的布局:

<div class="flexbox">
  <div class="header"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>

和它的css:

html,
body {
  height: 100%;
}
.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}
.flexbox .main {
  order: 0;
  flex: 1 1 auto;
  align-self: stretch;
}
.flexbox .header,
.flexbox .footer {
  order: 0;
  flex: 0 1 auto;
  align-self: stretch;
}

在上面的.main列中拉伸100%height,这一切都很完美,现在添加.flexbox-row内部.main:

<div class="flexbox">
  <div class="header"></div>
  <div class="main">
    <div class="flexbox-row">
      <div …

问题详情

我写了这样的代码。在这里，形象应该是由保留的空间传播fr，因为width，height和object-fit性质的工作。所以我认为第二个的文字.item会溢出。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
  gap: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="item">
    <img src="https://unsplash.it/450/450">
  </div>
  <div class="item">
    <img src="https://unsplash.it/450/450">
    text
  </div>
</div>

在 Firefox 中，这会导致文本用完，

Chrome 并非如此。

此外，将图像包装在div元素中而不是仅在网格项下方将解决该问题。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
  gap: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} …

我遇到了麻烦的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: …

在Google Chrome中,我如何强制嵌套在flexbox成员中的元素(通过"flexbox的成员",我的意思是使用样式元素的子元素display:flex)将其大小限制为嵌套在其下的flexbox成员的大小？例如,假设我有以下内容:

<div style="display:flex; flex-direction:column; height:100vh;">
  <div style="height:60px;">Static header</div>
  <div style="flex: 1 1 0; overflow:hidden;">
     <div style="overflow:auto; height:100%;" id="problem-is-here">
       Lots and lots of content, way too much to fit in the viewport
     </div>
  </div>
</div>

因为div最外层的第一个孩子div具有恒定的高度,所以它最终高度为60px,并且因为第二个孩子的diva flex-grow为1,所以它获得剩余的可用空间(在这种情况下,100%的视口减去60px) .我可以确认,根据Inspect Element,这个元素的尺寸足够大,可以占据视口空间的其余部分.

在Firefox和IE11中,由于height:100%,最内层的element(id="problem-is-here")采用为其父级计算的高度.因此,由于它太小而无法显示其内容并被overflow设置为auto,因此它(而不是整个body)获得垂直滚动条.这就是我要的.

但是,在Chrome中,最内层元素的渲染高度足以包含其所有内容,这些内容的高度大于其父级.因此,由于其父级具有overflow:hidden,因此不会出现滚动条,并且无法访问多余的内容.当父高度由flexbox而不是CSS height属性确定时,如何告诉Chrome渲染此最内层元素的高度最多等于其父级的高度？请注意,我不能给内部div或其父级一个确定的height值,因为在我正在处理的应用程序中,其他flexbox成员的数量可能会有所不同.

注意:我已经尝试了其他答案中的一些建议,例如设置所有元素min-height:0而不是auto,或者确保flex-basis设置为0,但这些都没有奏效.看到

http://plnkr.co/edit/UBRcrNmR5iDbn3EXu6FI?p=preview

举例说明问题.(div …