Safari 不计算高度：嵌套弹性盒上 100%

Posted 2023-03-05

【中文标题】Safari 不计算高度：嵌套弹性盒上 100%

【英文标题】：Safari not computing height: 100% on nested flexbox

【发布时间】：2017-01-16 08:41:30

【问题描述】：

我有一个 html 结构，其中有几个使用 flexbox 布局的列表项，其中有几个我正在使用嵌套的 flexbox 布局的元素。

在 Chrome、IE11 和 Edge 中，由于 Flexbox 和 height: 100%，所有列表项的高度都得到了有效匹配。提交按钮（“添加到购物篮”）因此是垂直对齐的。

但是，在 Safari（桌面版，版本 9.1.2）中，height: 100% 不适用（它可能没有看到作为基础的父高度值）。因此，框的高度不相等，并且我的元素未对齐。

如何修改 CSS 以使 Safari 与 Chrome 的呈现行为匹配？

Codepen example

body 
  padding: 0;

ul 
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;

li 
  padding: 0 10px;
  flex: 1 1 25%;

figure 
  margin: 0;
  background-color: rgba(255, 0, 0, 0.25);
  height: 100%; // this isn't working in safari
  display: flex;
  flex-direction: column;
  a 
    flex: 1;
    flex-shrink: 0;
  
  img 
    display: block;
    width: 100%;
  

figcaption 
  height: 100%; // this isn't working in safari
  flex: 1;
  display: flex;
  flex-direction: column;

.itemname 
  flex: 1;
  flex-grow: 1;
  margin-bottom: 10px;

.price 
  float: right;
  font-weight: bold;

form  select 
  display: block;
  width: 100%;
  margin-bottom: 10px;

button[type='submit'] 
  display: block;
  width: 100%;

<ul>

  <li>
    <figure>
      <a href="#">
        <img src="http://placehold.it/400" />
      </a>
      <figcaption>
        <div class="itemname"><span class="price">$10</span>Product</div>
        <form>
          <select>
            <option selected>Please select</option>
          </select>
          <button type="submit">Add to Basket</button>
        </form>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#">
        <img src="http://placehold.it/400" />
      </a>
      <figcaption>
        <div class="itemname"><span class="price">$10</span>Product Two With A Much Longer Name That Could Wrap</div>
        <form>
          <select>
            <option selected>Please select</option>
          </select>
          <button type="submit">Add to Basket</button>
        </form>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#">
        <img src="http://placehold.it/400" />
      </a>
      <figcaption>
        <div class="itemname"><span class="price">$10</span>Product Three No Select</div>
        <form>
          <button type="submit">Add to Basket</button>
        </form>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#">
        <img src="http://placehold.it/400" />
      </a>
      <figcaption>
        <div class="itemname"><span class="price">$10</span>Product</div>
        <form>
          <select>
            <option selected>Please select</option>
          </select>
          <button type="submit">Add to Basket</button>
        </form>
      </figcaption>
    </figure>
  </li>
</ul>

【问题讨论】：

哪个版本的 safari？

@Dekel Safari 版本 9.1.2 (11601.7.7) 在 OS X 上

可能重复：Chrome / Safari not filling 100% height of flex parent

***.com/questions/31421364/…

@Michael_B 我查看了那个问题和 Paulie_D 提到的那个问题，并首先查看了答案，但是在尝试了针对我的代码 sn-p 的解决方案后，我找不到使用绝对定位的解决方案包装器，我无法指定固定的高度值（加上 Chrome 表现良好，所以这不是一般的 Webkit 问题）。

【参考方案1】：

经过一些修改，现在在 Safari 9 上运行良好。

http://codepen.io/paulcredmond/pen/dpoqzQ

ul 
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;


li 
  padding: 0 10px;
  display: flex;
  align-items: stretch;
  flex-direction: row; 

【讨论】：

这在容器的高度相同的情况下很有希望，但是您已经失去了所包含元素的垂直对齐 - 添加到购物篮按钮都需要垂直对齐。当我尝试重新合并时，一切都会再次中断。

@bbodien 为什么不简单地将figcaption 高度设置为以 px 为单位的某个静态高度，然后相应地将所有内容放置在其中？如果项目名称有 10 行，你会全部显示吗？你不能在一些最大线之后剪辑它吗？

@Senthe 我真的需要一些东西来保持流畅，以适应国际化、防弹等。 （在最坏的情况下，我可以用一些我希望永远不会被破坏的大价值来做到这一点，但这是最后的手段）

【参考方案2】：

我通过减少我在结构中对齐的东西和外部容器之间的标记量来解决这个问题 -

基本去掉了figure和figcaption，这样需要垂直对齐的元素就是兄弟了，中间没有包装混淆Flexbox的高度匹配计算。

Working code demo

【讨论】：

你是救星！