Início / coding / Perguntas / 79431632
Accepted
Marko
Asked: 2025-02-12 08:43:23 +0800 CST

Impedir que o elemento filho aumente a altura do pai, que é baseado no flex-grow [duplicado]

  • 772

Eu tenho um elemento pai com altura definida (por exemplo, 100vh) e display: flex; flex-direction: column, e vários elementos filhos aninhados que não têm altura fixa - sua altura é baseada flex-grow: 1em vez disso. Se eu adicionar um novo elemento mais interno com uma altura maior que seu pai, então a altura de todos os seus ancestrais é alterada. Eu quero que o novo elemento transborde seu pai em vez de alterar sua altura.

Aqui está o link do jsfiddle: https://jsfiddle.net/1o8khw7z/1/

A única maneira de fazer isso funcionar é adicionar overflow: autotodos os elementos que estão entre o pai superior e o novo elemento (verifique os comentários CSS no jsfiddle).

Tenha em mente que não posso usar

Se houver muitos elementos aninhados, essa solução parece um pouco trabalhosa. Existe uma maneira melhor de lidar com isso?

html

1 respostas

  1. Best Answer

    Você deve conseguir resolver esse problema definindo o elemento filho aninhado de altura fixa como have position: absolute(isso fará com que ele transborde seu pai imediato).

    Se você tiver algum estouro extra que não queria, considere definir esse pai imediato para ter position: relative;. Isso evitará que as medições sejam width: 100%;mais bem vinculadas ao pai.

    Jsfiddle atualizado!

    Mudanças notáveis:

    #grandchild {
  flex-grow: 1;
  border: 10px solid green;
  box-sizing: border-box;
  position: relative; /* new! */
}

#grandgrandchild {
  position: absolute; /* new! */
  height: 600px;
  border: 10px solid blue;
  box-sizing: border-box;
  width: 100%;
}
    • 2

relate perguntas