I have a flex row with 2 divs (.box-1 and .box-1) both containing some content. I want them to remain in the same row until the content in .box-1 becomes long enough to push .box-2 to the next line.
.box-2
- Should have a fixed width on desktop screens.
- Should be 50% width on tablets.
- Should be full width on mobile devices.
Currently, the contents in .box-2 overflow but stay on the same line. I would like .box-2 to move to a separate line when the content overflows, or have a minimum width wide enough to hold all its contents.
Note: Using the col-lg-3 class sometimes makes .box-2 too small for its contents.
I am using CSS grid and sticking with Bootstrap classes for this design. Trying to avoid custom styling as much as possible. The .wrappable class is part of the library I'm working with and cannot be modified.
.container {
max-width: 300px;
}
.wrappable {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
margin-right: -0.625rem;
margin-bottom: -0.625rem;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="wrappable">
<div class="box-1 wrappable-flex border rounded item-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, incididunt ut labore et
</div>
<div class="box-2 col-sm-12 col-md-6 col-lg-3 border rounded text-nowrap">
some other text I want to put in the same row
</div>
</div>
</div>