Prevent div from wrapping around in bootstrap [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am using bootstrap to help structure a webpage. Within a row, I have three divs side-by-side, with widths: 2 columns, 6 columns, and 4 columns in that order in a 12 column layout.
The middle div also has a minimum width set, so when the outermost div shrinks beyond a certain width, there is not enough room for the right most div (the 4 column one), so it wraps around and hangs out below the other divs.
I would like to prevent this div from wrapping around, forcing it to be cut off by the window when the screen shrinks too small. How would I accomplish this?
I can provide any further details/code/pictures if necessary.
Thanks!
Before wrapping
After wrapping

Answer 1

To prevent wrapping: add this to your row.
.row{
width:100%;
margin:0;
padding:0;
display:flex;
}
width:100%;margin:0;padding:0; are optional in this.
This may cause your content to stretch to full height, so don't put content in bootstrap columns(e.g. `col-md-6 and so on) directly. put a div in them and put the content inside that div.
like this :
<div class="col-xs-2">
<div class="contentDiv">
<!--Put your content here-->
</div>
</div>
Here's an example:
#firstDiv,#secondDiv,#thirdDiv{
height:100px;
background-color:red;
min-width:100px;
}
#firstDiv{
background-color:green;
}
#secondDiv{
background-color:blue;
min-width:500px;
}
.row{
width:100%;
margin:0;
padding:0;
display:flex;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2" id="firstDiv">
</div>
<div class="col-xs-6" id="secondDiv">
</div>
<div class="col-xs-4" id="thirdDiv">
</div>
</div>
</div>