Question 45940 in CSS Question posted in
Some basic documentation can be found here.

How does flex compute size when meeting text that can be wrapped to a new line? – CSS

I have such html:

<html>
    <head>
    </head>
    <body>
        <nav>

        </nav>
        <div>
            The box-sizing property allows you to define in a specific way how certain elements match a particular area. Its default value is content-box, and it sets or retrieves the object's box model composition mode. The corresponding script feature for this property is boxSizing. box-sizing is one of the CSS3 box properties. When it comes to the CSS box model, many people may find it annoying, especially for beginners. However, the box model is an important property in our CSS application.
        </div>
    </body>
</html>


<style>
    body {
        margin: 0;
        display: flex;
    }

    nav {
        background-color: darkorange;
        flex-basis: 15rem;
    }

    body > div {
        background-color: cadetblue;
    }
</style>

The visual shows below
enter image description here

The nav‘s real width is 68.625 px instead of 240 px.

I’ve learned that flex-basis is equal to width under flex layout, but how does 68.625 calculated? I’ve noticed that text may be folded into more lines, but I’m not clear with when they will be folded and how much will they be folded, especially under flex layout.

For a more step, under which condition will flex-basis not equal to the real width?

Tags:

2

Answers


  1. 0

    You may need to use flex-shrink: 0; to see the final result as you want. like the following code:

    body {
  margin: 0;
  display: flex;
}

nav {
  background-color: darkorange;
  flex-basis: 15rem;
  flex-shrink: 0;
}
  
body > div {
  background-color: cadetblue;
}
    <html>
    <head>
    </head>
    <body>
        <nav>

        </nav>
        <div>
            The box-sizing property allows you to define in a specific way how certain elements match a particular area. Its default value is content-box, and it sets or retrieves the object's box model composition mode. The corresponding script feature for this property is boxSizing. box-sizing is one of the CSS3 box properties. When it comes to the CSS box model, many people may find it annoying, especially for beginners. However, the box model is an important property in our CSS application.
        </div>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    text by default will get pushed to a new line when there isn’t space to fit more text. If you don’t wan that behavior you can set an overflow property to scroll so you get a scrollbar, or hide so it just hides it if that’s what you mean

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search