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

Css – Line break on flex layout overflow

I have two divs in a flex space-between container and I want them to split in two lines above each other when they overflow

.container {
    background: wheat;
    padding: 10px;
    width: 300px;
    display: flex;
    justify-content: space-between;
}
<div class="container">
    <div>Lorem ipsum dolor sit amet 1</div>
    <div>Lorem ipsum dolor sit amet 2</div>
</div>
Tags:

2

Answers


  1. 0

    You should add some lines code css

    .container {
    background: wheat;
    padding: 10px;
    width: 300px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Add this line */
}

.container div {
    max-width: calc(50% - 5px); /* Add this line */
}
        <div class="container">
        <div>Lorem ipsum dolor sit amet</div>
        <div>Lorem ipsum dolor sit amet</div>
    </div>
    Login or Signup to reply.
  2. 0

    By "overflow", do you mean when the text wraps onto multiple lines? If so, you will need to add white-space: nowrap; in addition to flex-wrap: wrap;.

    (But be careful with this approach unless you are very sure of the content requirements—if one of the texts is ever longer than the container div, it will just break out of the box.)

    .container {
    background: wheat;
    padding: 10px;
    width: 300px;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    flex-wrap: wrap;
}
    <div class="container">
    <div>Lorem ipsum dolor sit amet 1</div>
    <div>Lorem ipsum dolor sit amet 2</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search