Flexbox-图像溢出

Question

我试图创建一个包含两个项目的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

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

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

.blog-img {
  flex: 1;
}

这将使图像停留在容器内。

Answer 2

只需将max-width：100%；和height：auto；添加到中，使其具有响应性。

null

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>