html - CSS填充父高度并保留

Question

我在使用 flexbox 时遇到问题。

当我没有设置时，子 div 填充父 divalign-items: center;

.outer {
width: 200px;
height: 200px;
display: flex;
background-color: red;
}

.inner {
  flex: 1 1 auto;
  background-color: blue;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

但是当我设置align-items: center;为外部 div 时，flex: 1 1 auto;没有用。

.outer {
width: 200px;
height: 200px;
display: flex;
background-color: red;
align-items: center;
}

.inner {
  flex: 1 1 auto;
  background-color: blue;
}

<div class='outer'>
  <div class='inner'>
  </div>
</div>

任何人都可以解决这个问题吗？

提前致谢。

标签： htmlcssflexbox

Answer 1

添加宽度和高度100%；到内部 div

.outer {
width: 200px;
height: 200px;
display: flex;
background-color: red;
align-items: center;
}

.inner {
  flex: 1 1 auto;
  background-color: blue;
  width : 100%;
  height: 100%;
}

<div class='outer'>
  <div class='inner'>
  </div>
</div>