Question

在此之前盖上副本，我在类似于我的问题上找不到任何有效的答案。（如果我错了，那么我可以看到这个链接，我将永远感激不尽！）

如果我有一个带有2个元素的flex容器，默认情况下，容器将始终默认高度为两者中的较大者。我想将flex容器的高度设置为两个元素中较小的一个，并溢出两者中较大的一个。如何设置flex容器的高度以匹配较小元素的高度？

有些代码，如果有人需要上述描述的基础：

html

<div class="container">
  <div class="small">
    <div>This is less content</div>
    <div>This is less content</div>
  </div>
  <div class="large">
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
  </div>
</div>

css

div.container { 
  display: flex;
}

div.small {
  flex: 1;
  background: red;
}

div.large {
  flex: 1;
  background: blue;
  overflow: auto;
}

这是一个可以使用的codepen： https://codepen.io/andrewsunglaekim/pen/eWJEmM

Answer 1

您可以在较大的元素上使用绝对定位。

＆＃13;

div.container { 
  display: flex;
  position: relative;
  justify-content: flex-end;
}

div.small {
  flex: 0 0 50%;
  background: red;
}

div.large {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  right: 50%;
  background: blue;
  overflow: auto;
}

＆＃13;

<div class="container">
  
  <div class="large">
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
  </div>

  <div class="small">
    <div>This is less content</div>
    <div>This is less content</div>
  </div>
</div>

＆＃13;

将flex容器高度设置为两个包含元素中较小的一个

1 个答案: