0

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?

Mactarvish
  • 65
  • 6

2 Answers2

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>
Sallar Rabiei
  • 630
  • 1
  • 12
  • 33
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

sss
  • 51
  • 8