Question

我正在尝试创建一个包含2个项目的Flex容器 - 文本div和图像div。

但是我在将图像保存在容器本身时遇到了实际问题。当我将浏览器调整到一个很小的宽度时，图像就会溢出容器，我似乎无法理解它为什么会发生。当然，物品应该留在容器内吗？

代码在这里：

<div class="featured-blog">
  <div class="featured-blog-main">
<h2>Featured Blog</h2>

  <div class="blog-flex">

 <div class="blog-text">
   <h3>Easter Island</h3>
   <p>Turpis sed tempus integer erat, pellentesque tortor nisl, eros viverra, integer vehicula taciti sapien sed nisl dui, nec litora tincidunt cum non lobortis sollicitudin. Et odio duis cum magna pretium. Enim augue odio. Non nec velit sed lacus in. Enim vitae pellentesque nec phasellus, quis in vitae, leo in eros donec, pede volutpat. Donec nunc mi vel, quis malesuada, sed proin curabitur orci ipsum volutpat, eu eu id blandit ultricies sodales</p></div> 

    <div class="blog-img"> <img src="http://www-tc.pbs.org/wgbh/nova/assets/img/fate-of-easter-island/image-01-large.jpg"></div>

  </div> <!-- blog-flex-->
    </div> <!-- featured-blog-main -->
  </div>   <!--featured-blog -->



.featured-blog {
 margin: 0 60px;
 padding: 100px 0;
 border-top: 2px solid gainsboro; }

.blog-flex {
 display: flex;  }

.blog-text {
margin: 0 30px; }

codepen在这里：

http://codepen.io/reskk/pen/ALdpbz

我已经做了一些环顾四周并尝试了一些解决方案：使用flex-basis，flex-grow等等，似乎都没有效果。

有没有办法让这两个div响应同时保持在的Flex容器内？

或者，如果我按照我设置的方式做错了，有人可以告诉我吗？

谢谢，

Reskk

Answer 1

只需将max-width: 100%;和height: auto;添加到<img>即可让其响应。

h2 {
  text-align: center;
}
h3 {
  margin: 0 0 30px;
  font-size: 1.8em;
}
.featured-blog {
  margin: 0 60px;
  padding: 100px 0;
  border-top: 2px solid gainsboro;
}
.featured-blog-main {
  background: rgba(0, 0, 0, 0.3);
}
.blog-flex {
  display: flex;
}
.featured-blog p {} .blog-text {
  /*  width: 80%;*/
  margin: 0 30px;
  flex: 1;
}
.blog-img img {
  max-width: 100%;
  height: auto;
}

<div class="featured-blog">
  <div class="featured-blog-main">
    <h2>Featured Blog</h2>
    <div class="blog-flex">
      <div class="blog-text">
        <h3>Easter Island</h3>
        <p>Turpis sed tempus integer erat, pellentesque tortor nisl, eros viverra, integer vehicula taciti sapien sed nisl dui, nec litora tincidunt cum non lobortis sollicitudin. Et odio duis cum magna pretium. Enim augue odio. Non nec velit sed lacus in.
          Enim vitae pellentesque nec phasellus, quis in vitae, leo in eros donec, pede volutpat. Donec nunc mi vel, quis malesuada, sed proin curabitur orci ipsum volutpat, eu eu id blandit ultricies sodales</p>
      </div>
      <div class="blog-img">
        <img src="http://www-tc.pbs.org/wgbh/nova/assets/img/fate-of-easter-island/image-01-large.jpg">
      </div>
    </div>
  </div>
</div>

Answer 2

将flex: 1;添加到.blog-text和.blog-img

.blog-text {
/*  width: 80%;*/
  margin: 0 30px;
  flex: 1;
}

.blog-img {
  flex: 1;
}

这会使图像留在容器内。

Flexbox - 图像溢出

2 个答案: