根据第一个 div 的高度隐藏第二个 div 的溢出（响应）

Question

也许我忽略了一些我不知道的东西嘿嘿..但关键是我有两列彼此相邻。一，左边，应该是列换行高度的主人，右边，包含一个 img，不应该计算换行高度的高度......我不能使用固定高度，甚至 Jquery 或其他原因，如果用户将其浏览器 window 拖动得更小，布局应该会发生变化。谢谢！

所以我的代码就像

<div class="column_wrap">
 <div class="column">
  Some text
 </div>
 <div class="column">
  IMG
 </div>
</div>

Example of what I want to achieve

Answer 1

如果图像不用于 height/width，则它需要是背景图像或绝对定位。

我假设在这种情况下两列的宽度相等，并且我使用 flexbox 来确保两列的高度也相等。

绝对位置

图像需要一个与第二列大小相同的额外包装，如下所示：

* {
  box-sizing: border-box;
}
.column_wrap {
  display: flex;
  margin: 10px auto;
  bordeR: 1px solid grey;
}
.column {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
}
.imgwrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.imgwrap img {
  max-width: 100%;
}

<div class="column_wrap">
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
  </div>
  <div class="column">
    <div class="imgwrap">
      <img src="http://lorempixel.com/output/fashion-q-c-640-480-8.jpg" alt="" />
    </div>
  </div>
</div>

Codepen Demo

背景图片

* {
  box-sizing: border-box;
}

.column_wrap {
  display: flex;
  margin: 10px auto;
  bordeR:1px solid grey;
}

.column {
  flex:0 0 50%;
  position: relative;
  overflow: hidden;
}

.column:nth-child(2) {
  background-image: url(http://lorempixel.com/output/fashion-q-c-640-480-8.jpg);
  background-size: cover;
}

<div class="column_wrap">
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita
    dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
  </div>
  <div class="column">
  </div>
</div>

Codepen Demo

根据第一个 div 的高度隐藏第二个 div 的溢出（响应）

hid overflow of 2nd div based on height of first div (responsive)

html

css

multiple-columns

responsive-design