How can i stop a flexbox item from moving?

so I tried to create a signup page, displayed as a flex, so in the left I’ll have some “welcome ..etc” text and in the right the signup form. I also have a JS script so that whenever an input from the form isn’t “good”, a <small> message would show below the input; The problem is that whenever the script is executed, and a <small message shows up, my flex is resized and the message from the left side is moved down a bit. Is there anyway to achieve this without using position: sticky?

Flex container: Is there a way stretch the first item’s height when container wraps

div { border: 1px solid #d3d3d3; } .flex-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nowrap { flex-wrap: nowrap; } .item { height: 100px; width: 100px; } <div class=”flex-container”> <div class=”flex-container nowrap”> <div class=”item”> item 1 </div> <div class=”item”> item 2 </div> </div> <div class=”item”> item 3 </div> </div> Is there a … Read more

Flexbox: how to wrap a flex item once the width of another flex item is 0?

I got a flex container that contains 2 elements. Here is a JSFiddle Demo. The first one is a dynamic header with text. The second one is a wrapper for multiple dynamic buttons. Dynamic meaning the text is generated with javascript and does not have a specific width and there can be 2-4 buttons depending on the user (so I cannot set flex-basis or width to a specific amount of px on these flex-items).

Flex-direction property in CSS

I’m trying to modify the code at https://codepen.io/rperry1886/pen/KKwbQNP to have the images display left-to-right rather than vertically. I’ve tried reading up on Flexbox, i.e., https://css-tricks.com/snippets/css/a-guide-to-flexbox/ , which seems to suggest that changing flex-direction: column; to flex-direction: row; should do the trick; but that seems to have no effect on the code above. Can anyone explain … Read more

How to control the size of a box within a container without having it squeezed?

I am trying to understand why this does not work the way I imagine. I can find workarounds but see above my question. .content { display: flex; height: 700px; background: linear-gradient(95deg, rgba(255, 255, 255, 1) 50%, rgba(26, 26, 26, 1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .center { width: 100px; height: … Read more