The BB element is a flex item in the flow and is contained within its container (.row).
If you want to make it extend beyond its parent and fill the remaining width of the viewport, you can try the following CSS:
.container > .row:first-child > .col-xs-10 {
position: absolute;
width: 100%;
margin-left: 16.7%;
}
.container > .row:first-child {
position: relative;
}
body {
background-color: lightgreen;
}
[class^="col"] {
background: gold;
border: 1px solid tomato;
}
<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-2">AA</div>
<div class="col-xs-10">BB</div>
</div>
<div class="row">
<div class="col-xs-6">CC</div>
<div class="col-xs-6">DD</div>
</div>
</div>
link to revised fiddle
Key Points:
- Target the BB element specifically.
- Remove BB from the document flow.
- Set width to fill the entire viewport.
- Position BB to start right after AA (which has a width of
flex: 0 0 16.66667%).
- Ensure the container is the nearest positioned ancestor for absolutely positioned children.
One possible issue with this approach is the width specification (item #3).
If BB is absolutely positioned in relation to its parent, determining the exact distance to the viewport edge can be challenging. Providing too much width may lead to a horizontal scroll bar, as demonstrated in my example.
One solution is to add overflow-x: hidden to the body element, which eliminates the scrollbar and clips BB at the viewport edge.
Another option is to eliminate position: relative from the parent, making BB relative to the viewport. Although this method allows for precise sizing of BB to the viewport edge, it comes at the expense of the margin accuracy noted in item #4.
Let's experiment with it:
EDIT: Apart from the margin accuracy limitation, there is another flaw with this technique. Rather than removing the example, I am retaining it for educational purposes. Try to identify the issue before the end of the content :-)
.container > .row:first-child > .col-xs-10 {
position: absolute;
width: 75%;
margin-left: 25%;
left: 0;
}
.container > .row:first-child > .col-xs-2 {
flex-grow: 1;
}
body {
background-color: lightgreen;
}
[class^="col"] {
background: gold;
border: 1px solid tomato;
}
<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-2">AA</div>
<div class="col-xs-10">BB</div>
</div>
<div class="row">
<div class="col-xs-6">CC</div>
<div class="col-xs-6">DD</div>
</div>
</div>
link to revised fiddle
Key Points:
- BB is now sized, aligned, and positioned relative to the initial containing block (viewport).
- To avoid gaps between AA and BB, AA is given
flex-grow: 1 despite being set with flex: 0 0 16.666667% in the original code.
BB now extends precisely to the viewport edge. However, adjusting AA with flex-grow was necessary to prevent gaps due to the imprecise margin-left for BB.
EDIT: The issue with the aforementioned approach lies in the fact that since BB is absolutely positioned, it is no longer part of the document flow. Consequently, AA doesn't acknowledge its presence, causing flex-grow to expand AA all the way to the container edge, not just to the beginning of BB..
Additional options include:
Expanding the container to full width and managing the length and margins of flex items. (This would entail significant modifications to the Bootstrap framework, explaining why it wasn't pursued.)
Utilizing JavaScript