在容器中设置2个元素的样式

Question

两个元素可以独立地增加高度，但是，我希望容器的高度始终与元素2的大小相匹配，而元素1的高度尽可能地增加高度但是永远不会使容器越过元素2的高度。如果元素1的高度高于容器的高度，则元素1将获得滚动而不会增加容器的大小。

我目前在JavaScript中这样做的效率非常低，我想知道我是否可以用CSS做到这一点。谢谢。

Answer 1

可以使用flexbox拉伸它们。在此示例中，第二个容器被拉伸到第一个容器。 更详细：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

＆＃13;

public

＆＃13;

.outer {
    align-items: stretch;
    display: flex;
}

.inner1 {
    min-height: 200px;
    width: 150px;
    background: blue;
}

.inner2 {
  background: orange;
  width: 150px;
}

＆＃13;

＆＃13;

＆＃13;