Flexbox

Question

我正在尝试创建一个包含 2 个项目的弹性容器 - 一个文本 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 等，none 似乎可行。

有没有办法让这两个 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; 添加到您的 <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>

Flexbox - 图像溢出

Flexbox - Image overflowing

css

image

overflow