Why is the second flexbox container (with a SVG in it) moving up?

I'm struggling to understand the behaviour of the following pen (but I already have a workaround): https://codepen.io/nicoespeon/pen/BOamdJ

There are 3 flexbox containers:

  1. the first contains only text
  2. the second contains a <svg> element and some text
  3. the third contains some text and a <svg> element

I expect all of them to be aligned. But the second box is moving up.

Note: I know that if I wrap all of them in a flex container (e.g. set display: flex | inline-flex; to body), they get aligned. But I don't understand how the <svg> element is impact its flex container in the second box.

Any idea?

This has been answered here.

It's due to the fact that display: inline-flex; is treated just like any other inline element, with default vertical alignment being baseline. Notice that the bottom of the SVG is aligned with the text inside the previous div. If you add vertical align: top to the display: inline-flex items, they'll all be aligned as expected.

Hope that helped! I can tell you that this issue confounded the heck out of me when I first encountered it.

Cheers!

Why is the second flexbox container (with a SVG in it) moving up?, This has been answered here. It's due to the fact that display: inline-flex; is treated just like any other inline element, with default vertical alignment being  Hello everyone, My main problem is that I am not able to move container "#main-left" to the 'right-top' of container "#left" using FLEXBOX. I hoppe u know what I mean. So this blue container need to fix to top-right margin of red container. I am asuming that it could be problem with main axis and […]

Apply display:flex; for body tag. It works.

div {
  height: 100px;
  padding: 0 5px;
  margin: 0 5px;
  
  color: white;
  background-color: blue;
  
  display: inline-flex;
  align-items: center;
}

svg {
  background-color: red;
}

body {
  display:flex;
}
<div>Without SVG</div>
<div>
  <svg height=40 width=20></svg> After SVG
</div>
<div>
  Before SVG <svg height=40 width=20></svg>
</div>

Understanding Flexbox: Everything you need to know, Style the list items just a bit, so you may see what's going on here. li { width: 100px Flex container : The parent element you've set display: flex on. /*​second flex-item*/li:nth-child(2){ flex: 1 1 0; background-color: #8cacea;}. CSS-Tricks * is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That's a good thing! I've used WordPress since day one all the way up to v17, a decision I'm very happy with. I also leverage Jetpack for extra functionality and Local for local development.

Check this one i hope help you and solved your issue

div {
      height: 100px;
    padding: 0 5px;
    color: white;
    background-color: blue;
    display: inline-flex;
    align-items: center;
    float: left;
    margin: 3px;
}

svg {
  background-color: red;
}
<div>Without SVG</div>
<div>
  <svg height=40 width=20></svg> After SVG
</div>
<div>
  Before SVG <svg height=40 width=20></svg>
</div>

5 Gotchas You're Gonna Face Getting Inline SVG Into , You've read up on how inline SVG's are better than font icons and are ready to take the plunge. You call a meeting with your team to discuss moving over to  The initial values of flexbox mean that if all I do is create a flex container, my items would start on the right and be displayed moving towards the left. The start edge in the inline direction is the place where sentences start in the writing mode you are using .

Content Jumping (and How To Avoid It), This layout shifting is especially frustrating on mobile devices, where a big enough A few seconds after initial visit the headings (and sometimes other static  To use Flexbox in your application, you need to create/define a flex container using the display property. Usage − display: flex | inline-flex This property accepts two values. flex − Generates a block level flex container. inline-flex − Generates an inline flex container box. Now, we will see how to use the display property with examples

Does CSS Grid Replace Flexbox?, They can work together: a grid item can be a flexbox container. Especially if you're just starting to get a grip on the weird, alien syntax of Flexbox. Always make sure that the second row is twice the size of the first and third. layout like this is more powerful in Flexbox, because Flexbox allows us to move  Ugh. react-svg-flexbox to the rescue. You can fix the layouting problem with react-svg-flexbox.It’s a small library, not a lot of stars, but omg so perfect. Built on top of Facebook’s css-layout, which has recently become a part of yoga, it lets you use CSS flexbox to position SVG elements.

Basic concepts of flexbox, The Flexible Box Module, usually referred to as flexbox, was designed column or column-reverse , and also change the second to wrap and nowrap . display: flex on the parent to create flex items, the items all move into a  As in the above example, make a container into a flex container, and then use either align-items on the parent element or target the flex item itself with align-self. Card layout pushing footer down Whether you use flexbox or CSS Grid to lay out a list of card components, these layout methods only work on direct children of the flex or grid

Comments
  • Thanks for your feedback. I found the workaround as explained in the issue (will make it clearer though). My question is: why is that happening? I don't understand why the <svg> element is impacting its flex container so we need to wrap all of this into another flex container. Am I missing something?
  • @nicoespeon, It wasn't happened due to svg or any other issue. Container div of the elements should be a flex container, otherwise it doesn't work properly. You need to understand the basic application of flex properties. Please visit link below. w3schools.com/css/tryit.asp?filename=trycss3_flexbox
  • Yep, I understand I should put the div boxes into a flex container if I want to control the flexible layout of them. In the case I presented though, div boxes are the flex containers. And I was surprised the second box move up because it contains an SVG, while the others don't. I'm wondering why this happens =)
  • @nicoespeon, Not only for svg, I think it doesn't work for any element inside that div such as img, input etc..check.
  • You're right, I think if you don't provide a flex container to the div boxes, they get positioned regarding what's inside, even though they are flexbox containers themselves. I was surprised the content was impacting the div position, but it's not just SVG. I'm closing the issue accepting your answer as it's the correct way to do it. Thanks!
  • Thank you for your reply, but I already have a proper workaround (cf. my message & VSM's reply). I'm looking for the reason behind this behaviour. Also, I don't want the <div>s to be float in that case. It has unexpected side effects. I still want them to be flexboxes.