css 3 Itens passando da janela :(

[Cunha Fabri]

Boa tarde pessoal, estou precisando de ajuda.
Tenho uma página web que possue botões e quando eu passo o mouse em cima deles outros botões se expandem para os lados. A questão é que ao se expandir elas estão indo para o lado e passando da janela criando uma barra de rolagem e dificultando a leitura desses botões. Eu quero que quando esses botões forem passar da janela eles se expandam para baixo ao invés de se expandirem para o lado, mas apenas os botões que vão ultrapassar a janela.
Conseguem me ajudar dizendo como fazer isso no CSS?

[Marcos Full]

Bom dia Cunha Fabri!

Não sei se entendi bem a sua questão.

Mas no caso de os botões ficarem maiores do que o espaço que a janela oferece, ao invés de criar uma barra de rolagem horizontal, você gostaria que os botões passassem para a parte de baixo, isso ?

Vamos ver, se for isso, você poderia usar o display: flex no elemento pai com mais alguns atributos.

Vou lhe mostrar um exemplo em código:

/* Elemento pai */
.barra_topo {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap; /* <-- Essa propriedade faz com que os elementos que passarem do limite oferecido pela seção, passem automaticamente para a linha de baixo */
}

Não sei se consegui ajudar Cunha Fabri, mas faça os devidos testes e nos informe aqui.

Tenha um ótimo dia!