时间戳

首页 > 解决方案 > Flexbox - 孩子不是 100% 的高度

css - Flexbox - 孩子不是 100% 的高度

问题描述

我有一个像这样的基本弹性布局

.container {
  display:flex;
  width:100%;
      justify-content: space-between;
   height:100%;
}

.left {
  width: calc(61.8034% - ( 0.38196600790794 * 20px ) );
}

.right {
width: calc(38.1966% - ( 0.61803399209206 * 20px ) );  
}

.left, .right {
  height:100%;
   height:100%;
}

.image_container {
  background:red;
   height:100%;
}
.image_container img {
  display:none;
}

.image_16x9_container{
    background:green;
    display: block;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}
<div class="container">

  <div class="left">
  <div class="image_container">
This is some example text
    
      </div>
  </div>
  
  <div class="right">
      <div class="image_16x9_container">
        <img src="https://picsum.photos/500/500">
      </div>
  </div>
  
</div>

我无法弄清楚为什么左侧 div 不是 100% 高度，我认为让父 div flex 会自动解决这个问题。

我哪里错了？

标签： cssflexbox

解决方案

你是对的，但你不必height:100%在弹性项目上进行设置，因为它不会工作，并且会破坏默认情况下使元素 100% 高度的默认拉伸行为：

.container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.left {
  width: calc(61.8034% - ( 0.38196600790794 * 20px));
}

.right {
  width: calc(38.1966% - ( 0.61803399209206 * 20px));
}

.image_container {
  background: red;
  height: 100%;
}

.image_container img {
  display: none;
}

.image_16x9_container {
  background: green;
  display: block;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
<div class="container">

  <div class="left">
    <div class="image_container">
      This is some example text

    </div>
  </div>

  <div class="right">
    <div class="image_16x9_container">
      <img src="https://picsum.photos/500/500">
    </div>
  </div>

</div>

推荐阅读