css - Flexbox - 图像溢出

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; }

代码笔在这里:

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

我环顾四周并尝试了一些解决方案:使用 flex-basis、flex-grow 等，但似乎都不起作用。

有没有办法让这两个 div 保持响应，同时保持它们 内他们的 flex 容器？

或者，如果我在设置方式上做错了什么，有人可以告诉我吗？

谢谢，

雷斯克

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>