弹性盒中的弹性盒，定位不起作用。（弹性盒中的弹性盒）答案

【问题标题】：Flex box in flex box, and positioning not works. (Flexbox in flexbox)弹性盒中的弹性盒，定位不起作用。（弹性盒中的弹性盒）
【发布时间】：2015-09-09 01:13:20
【问题描述】：

更新

对于那些不喜欢内联 CSS 并且想要类的人，这里有另一个 jsFiddle 带有类和样式表。

更新结束

我想做一个产品页面。它将有三列。第一个是图片，第二个是一些规格，第三个是“入篮”。所有的栏目内容都是动态的，所以我永远不会知道，哪个更高，它的大小是多少。

我尝试做的是：

将所有三个柱高作为最高柱的高度。
在第二列中，我需要盒子顶部的产品规格（现在是 lorem ipsum），以及盒子底部的一些信息。（123456）。

所以，我用 flexbox technique 制作了三列，它可以正常工作，正如我所料。（因为这样会响应，以后需要更改指定宽度的3列的顺序，但现在不相关了）。

好的，我想，如果我将另一个 flex div 放入第二列，但现在使用列模式，它就可以完成这项工作。

但不是。我不明白，为什么第二列第二个flex box高度没有列高，（我伤心strech和justify-content: space-between）

我也应该为第三列做。

我使用了内联样式表，也许它是可读的。

它仅适用于 FF 和 IE，但不适用于 Opera 和 Chrome。

<!DOCTYPE html>
<html>
    <head>
        <title>Flex teszt</title>
        <style>
            p {margin-bottom: 17px;}
        </style>
    </head>
    <body style="padding: 0; margin: 0;">
                    <!-- Big and first flex container -->
        <div style="width: 1000px; margin: 0 auto; border: 1px solid #000; box-sizing: border-box;">
            <div style="display: flex; flex-wrap: nowrap; justify-content: space-between ; flex-direction: row; align-items: stretch; width: 100%; box-sizing: border-box; border: 1px solid #f00">
                <div style="width: 32%; box-sizing: border-box; order: 1; border: 1px solid #f00;">
                    <img src="http://vaso.hu/venus.jpg" style="width: 100%;" alt="">
                </div>

                <div style="width: 32%; box-sizing: border-box; order: 2; border: 1px solid #0f0; box-sizing: border-box;">
                    <div style="height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between;  width: 100%; box-sizing: border-box;">
                        <div style="border: 1px solid #00f; width: 100%; order: 1" >
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </div>
                        <div style="border: 1px solid #00f; width: 100%; aling-self: flex-end; box-sizing: border-box; display: block; order: 2">123456</div>
                    </div>
                </div>

                <div style="width: 32%; box-sizing: border-box; order: 3; border: 1px solid #f0f; box-sizing: border-box;">
                    789
                </div>
            </div>
            <!-- /big and first flex container -->
        </div>
    </body>
</html>

这是 jFiddle 链接。

有人可以帮我吗？

【问题讨论】：

我想帮助你，但我无法阅读你的代码，因为目前很难看出什么样式适用于什么标记（html），因为你不使用任何类。你能用 CSS 样式表发布你的代码吗？
我已经更新了我的问题，所以在问题的顶部，还有另一个 jsFiddle 链接，有类，没有内联样式。
感谢您的反对！太好了，没有任何解释。

标签： html css flexbox

【解决方案1】：

从.secondCol .innerFlex中删除height: 100%;，它的容器没有设置高度，所以浏览器不知道100%应该有多高
添加display: flex; .secondCol 这将允许.innerFlex 填充其可用高度

body {
  padding: 0;
  margin: 0;
}
p {
  margin-bottom: 17px;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
  border: 1px solid #000;
  box-sizing: border-box;
}
.flexContainer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #f00
}
.firstCol {
  width: 32%;
  box-sizing: border-box;
  order: 1;
  border: 1px solid #f00;
}
.secondCol {
  display: flex; /*Add this*/
  width: 32%;
  box-sizing: border-box;
  order: 2;
  border: 1px solid #0f0;
  box-sizing: border-box;
}
.secondCol .innerFlex {
  /*height: 100%; Remove this*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.secondCol .innerFlex .firstItem {
  border: 1px solid #00f;
  width: 100%;
  order: 1
}
.secondCol .innerFlex .secondItem {
  border: 1px solid #00f;
  width: 100%;
  aling-self: flex-end;
  box-sizing: border-box;
  display: block;
  order: 2
}
.thirdCol {
  width: 32%;
  box-sizing: border-box;
  order: 3;
  border: 1px solid #f0f;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="flexContainer">
    <div class="firstCol">
      <img src="http://vaso.hu/venus.jpg" style="width: 100%;" alt="">
    </div>

    <div class="secondCol">
      <div class="innerFlex">
        <div class="firstItem">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
        <div class="secondItem">123456</div>
      </div>
    </div>

    <div class="thirdCol">
      789
    </div>
  </div>
  <!-- /big and first flex container -->
</div>

【讨论】：

感谢您的快速回复。 +1，因为它肯定在这里工作。现在我尝试在我的环境中实现它，如果它有效，我会接受。如果没有，我回来问。再次感谢。
它就像一个魅力，再次非常感谢你。我吸了两天半。
没问题，很高兴我能帮上忙。
还有一个简单的问题。在secondItem、123456 怎么能对齐到底部？试过align-self: flex-end，但没有帮助。
啊，是的，有一个小错字aling-self: flex-end;，修正一下就可以了。