CSS flex layout overflow issue-CodePudding

I'm trying to learn css flex layout but I ran into the following problem:

I have the following code:

.my-container {
  display: flex;
  margin: 25px;
  flex-wrap: wrap;
}

.fixedCol {
  padding: 12px !important;
  flex: 0 0 400px;
  border: 3px solid #b2e485;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.dynamicCol {
  padding: 12px !important;
  border-top: 3px solid #b2e485;
  border-bottom: 3px solid #b2e485;
  border-right: 3px solid #b2e485;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  flex: 1;
}

@media (max-width: 1100px) {
  .fixedCol {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    flex: 0 0 100%;
  }

  .dynamicCol {
    flex: 0 0 100%;
    border: 3px solid #b2e485;
    border-top: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10px;
  }
}

 <div className="my-container">
  <div className="fixedCol">
    <h5>FIXED</h5>
  </div>
  <div className="dynamicCol">
    <h5>Dynamic</h5>
  </div>
</div>

I tried to create a 2 column layout with the following characteristics:

on screens bigger the 1100px: 1 column with 400px width and 1 column to fill the rest
on screens under 1100px: break columns in 2 rows

The problem that I have is when the content is bigger than the second column, the row breaks into 2 separate rows even if the screen is bigger than 1100xpx.How can I make the content to fit into second column but don't break de row?

EDIT: The problem was that the text was a single word. If I replace it with a paragraph it works well. But there is another problem: in my app the place will be replaced with some chart components. When I add those charts the same thing happens. Before I used the charts in a bootstrap 5 grid layout and it worked well without overflowing. (The charts are responsive)

CodePudding user response：

Depending on how you want to handle the content:

Add "overflow: hidden" to the .dynamicCol class, to hide excess content.
Add "word-break: break-all" to the same class to make the word being broken up in several lines.
Make sure not to use words longer than what the container is supposed to be.

CodePudding user response：

The reason why it is wrapping on 2nd row is in your container stylings:

flex-wrap: wrap;

If you pass lots of text in your second box, it will try to squish it but, it wont work. So it it collapse to another row, becouse you allowed it to do so with wrap style.

You can fix it by removing the flex-wrap: wrap from .my-container and then setting a flex-direction: column in media query.

Quick snippet:

.my-container {
  display: flex;
  margin: 25px;
}

/* This will also prevent the content from overflowing */
.dynamicCol {
  word-break: break-all;
}

/* You should manualy adjust this value to fit your site */
@media (max-width: 1100px) {
  .my-container {
    flex-direction: column;
  }
}

CodePudding user response：

Remove the flex-wrap to stop the content from wrapping onto a new row.

Use the word-break property to allow the content to wrap even if there is an unbroken word which is longer than the available space.

And you can significantly simplify your CSS by applying the outer border to the container element rather than the two child elements.

.my-container {
  margin: 25px;
  border: 3px solid #b2e485;
  border-radius: 10px;
}

.fixedCol {
  padding: 12px;
  border-color: #b2e485;
  border-style: solid;
  border-width: 0 0 3px 0;
}

.dynamicCol {
  padding: 12px;
  word-break: break-word;
}

@media (min-width: 1100px) {
  .my-container {
    display: flex;
  }
  .fixedCol {
    flex: 0 0 400px;
    border-width: 0 3px 0 0;
  }
  .dynamicCol {
    flex-grow: 1;
  }
}

<div >
  <div >
    <h5>FIXED</h5>
  </div>
  <div >
    <h5>Dynamic</h5>
  </div>
</div>

<div >
  <div >
    <h5>FIXED</h5>
  </div>
  <div >
    <h5>Dynamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamicamic</h5>
  </div>
</div>

CodePudding user response：

<div >
    <div >
        <h5>FIXED</h5>
    </div>
    <div >
        <h5>Dynamicccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</h5>
    </div>
</div>

Below is css code

.my-container {
    display: flex;
    margin: 25px;
}

.fixedCol {
    padding: 12px !important;
    flex: 0 0 400px;
    border: 3px solid #b2e485;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.dynamicCol {
    padding: 12px !important;
    border-top: 3px solid #b2e485;
    border-bottom: 3px solid #b2e485;
    border-right: 3px solid #b2e485;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    flex: 1;
}
.dynamicCol h5{
    word-break: break-all;
}

@media (max-width: 1100px) {
    .fixedCol {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        flex: 0 0 100%;
    }

    .dynamicCol {
        flex: 0 0 100%;
        border: 3px solid #b2e485;
        border-top: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
        }
    .my-container{
        flex-wrap: wrap;
    }
}