图像可防止弹性项目拉伸到屏幕底部

Question

我正在尝试使用flexbox定义两列布局，其中第一列具有图像，两列具有不同的背景色。我希望这两列都可以延伸到窗口底部。

但是，每当我将浏览器窗口的大小调整到足够低的高度时，我都会在右列的底部得到一个空白。

这是行为的example。在这种情况下，我希望红色列一直延伸到屏幕底部。

有关如何解决此问题的任何建议？我想防止图像过度拉伸。

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left {
  background: lightblue;
  flex: 2;
}

.left img {
  max-width: 650px;
  width: 100%;
}

.right {
  background: lightcoral;
  flex: 1;
}

<div class="container">
  <div class="left">
    <img src="http://via.placeholder.com/400x400" />
  </div>
  <div class="right">
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
  </div>
</div>

Answer 1

在容器类上使用ip_address=$(curl http://example.com/json | search_json) ，因此当窗口高度小于图像高度时它不会收缩

min-height: 100vh;

html,
body {
  height: 100vh;
  max-height:100%;
}

body {
  margin: 0;
}

.container {
  display: flex;
  min-height: 100vh;
}

.left {
  background: lightblue;
  flex: 2;
}

.left img {
  max-width: 650px;
  width: 100%;
}

.right {
  background: lightcoral;
  flex: 1;
}

希望这会有所帮助

Answer 2

删除设置的身高/身高就可以了。

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left {
  background: lightblue;
  flex: 2;
}

.left img {
  max-width: 650px;
  width: 100%
}

.right {
  background: lightcoral;
  flex: 1;
}

<div class="container">
  <div class="left">
    <img src="http://via.placeholder.com/400x400" />
  </div>
  <div class="right">
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
  </div>
</div>