代码之家 › 专栏 › 技术社区 › Matthew Winfield

如何从flexbox横轴大小中排除子项,并使其滚动?

flexbox css

Matthew Winfield · 技术社区 · 3 年前

我有两个兄弟元素,每个元素都包含动态内容。

<div class="flex">
    <div class="sibling-1"></div>
    <div class="sibling-2"></div>
</div>

在某些情况下 sibling-1 届时将有更多内容 sibling-2 反之亦然。我想要第二个元素的高度 西伯利亚-2 始终等于第一个的高度 西伯利亚-1 .如果高度 西伯利亚-2 大于以下高度 西伯利亚-1 它将溢出 flex div,因此是可滚动的。

有没有办法用Flexbox来实现这一点?

0 回复 | 直到 3 年前

G-Cyrillus 3 年前

是的,这是可能的。让兄弟姐妹单独设置最大高度,并设置其他兄弟姐妹的最大高度 flex-basis: 0 和 flex-grow: 1 ,根据规格,这将把它们扩展到兄弟姐妹的高度。没有绝对定位。任何元素上都没有设置高度。

main {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  width: 7em;
  border: thin solid black;
  margin: 1em;
}

:not(.limiter)>div {
  flex-basis: 0px;
  flex-grow: 1;
  overflow-y: auto;
}

<main>
  <section>
    <div>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text
      in flow text in flow text in flow text in flow text in flow text in flow text in</div>
  </section>

  <section class="limiter">
    <div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
  </section>

  <section>
    <div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
  </section>
</main>

-1

lami 4 年前

有没有办法用Flexbox来实现这一点?

基本上,没有。flex等高功能基于容器的高度,而不是任何特定的兄弟。

所以 sibling-1 和 sibling-2 高度总是相等的。

但是flexbox没有内置机制将项目的高度限制为一个兄弟的高度。

考虑JavaScript或CSS定位属性。

以下是一个使用绝对定位的示例:

.flex {
  display: flex;
  width: 200px;
  position: relative;
}

.flex>div {
  flex: 0 0 50%;
  border: 1px solid black;
  box-sizing: border-box;
}

.sibling-2 {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}

<div class="flex">
  <div class="sibling-1">text<br>text<br>text<br>text<br>text<br>text<br></div>
  <div class="sibling-2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
</div>

jsFiddle

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前