Flexbox子元素不尊重其父元素的边界。

Question

Flexbox子元素不尊重其父元素的边界。

htmlcssflexbox

3

我想用flexbox实现响应式布局。简单来说，当浏览器窗口的高度和宽度发生变化时，我想让这个示例中的图片表现得像这个示例。

这两个示例基本相同，只是第一个示例添加了一个设置高度的蓝色横幅。绿色横幅需要占据剩余的垂直空间，而图片需要遵守绿色横幅的高度。

*注意：蓝色横幅的高度在某种程度上是动态的，即在页面呈现之前我不知道其高度。在示例中将其硬编码为200px以使示例正常运行。

非常感谢您的帮助。

代码示例:

<html>
  <body>
    <div class="wrapper">
      <div class="imageWrapper">
        <img src="http://fpoimg.com/1000x800">
      </div>
    </div>
    <div class="stacksWrapper"></div>
  </body>
</html>

    * { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
html { 
  margin:0; 
  padding:0; 
  height:100%; 
  width: 100%; 
}
body { 
  margin:0; 
  padding:0;  
  background:red; 
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.wrapper { 
 width: 100%;
  text-align: center;
  background: green;
  flex: 1;
  flex-basis: 0;
  min-height: 0;
  position: relative;
}

.imageWrapper {
  height:100%; 
  width: 100%;

  img {
      max-height:100%; 
      max-width:100%; 
      width: auto;
  }
}

.stacksWrapper {
  height: 200px;
  width: 100%;
  background-color: blue;
}

- Cody M.

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- max · Answer 1

您可以在.wrapper元素中添加三个flexbox属性：

.wrapper {
  width: 100%;
  text-align: center;
  background: green;
  flex: 1;
  flex-basis: 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

- G-Cyrillus · Answer 2

你也可以使用flex来包装图片，然后将图片设置为绝对定位，以避免它缩小：

.imageWrapper {
  height: 100%;  
  width: 100%;
  display:flex;

  img {
      max-height:100%; 
      max-width:100%; 
    /* cure shrinking effect */
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0; 
    /* end cure shrinking effect */
      margin:auto;
  }
}

http://codepen.io/gc-nomade/pen/wWKGOK