Question

我有一个复杂的布局，其中我有一个由动态高度的JavaScript生成的div，他被称为＆＃34; .outer＆＃34; 。这个div有一些嵌套的div，最后导致一个名为＆＃34; .target＆＃34;的div。我需要目标div在＆＃34; .outers＆＃34;高度。而且我不想解决内部div，因为它们是我的JS框架生成的不同标记。

我不想通过JS设置高度，我不能在＆＃34; .outer＆＃34;

中将位置设置为绝对值或相对值

HTML：

<div class="outer">
  <div class="inner">
    <div class="anotherInner">
      <div class="target">
        This div should be outer's height no matter how many divs are between target and outer like ".inner"
      </div>
    </div>
  </div>
</div>

CSS：

body {
  background: #000;
}

.outer {
  background: #333;
  height: 500px;  /* this is not a pixel value, only for example*/
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}

.inner {
  background: #555;
}

.target {
  background: #777;
  order: 0;
  flex: 1 1 auto;
  align-self: auto;
}

示例：

http://codepen.io/anon/pen/akwWZK?editors=1100

Answer 1

在FlexBox中执行此操作的唯一可能方法是通过添加display：flex;来解决CSS中的.inner div。他们。

我在这里为您创建了一个工作示例：http://codepen.io/mattpark22/pen/rLwwZp

To＆＃39; .inner＆＃39;添加：

display: flex;

To＆＃39; .target＆＃39;添加：

height: 100%;

To＆＃39; .outer＆＃39;改变，弯曲方向：

flex-direction: row;

我的codepen示例还清理了一些不需要的CSS。

乘以DIV，内部div全高，仅限Flexbox - 可能吗？

1 个答案: