I'm trying to make a particular type of css layout, like this (which works). Please note that I'm not using SO built-in code editor only because it lacks scss support:
https://codepen.io/stratboy/pen/NWYZwex
As asked in comments, I'll also add a compiled css version, but I really think you should watch it on codepen since it also have a big screen, that is currently needed to really see what happens:
.main-container {
max-width: none;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
background-color: #c3c3c3;
}
.inner-container {
width: 100%;
background-color: #777;
}
.columns {
display: flex;
justify-content: flex-end;
width: 100%;
background-color: rgba(0, 0, 200, 0.5);
gap: 4em;
}
.left {
text-align: left;
height: 100px;
background-color: cyan;
width: calc(458px - 2em);
}
.right {
text-align: right;
height: 100px;
width: calc(50vw + 114.5px - 2em);
background-color: red;
}<div class="main-container">
<!-- <div class="inner-container"> -->
<div class="columns">
<div class="column left">
left
</div>
<div class="column right">
right
</div>
</div><!-- cols -->
<!-- </div> --><!-- inner -->
</div>The above is for bleeding edge right column. Basically, given a centered 'underlying' or 'ghost' container of 1145px, I want a 40% column and a bleeding edge column, with a gap of 4em. Above, I was able to do it.
The columns should be 'aligned' with other similar components that are using common flex-basis approach, 40% and 60%. But I found that, compared to that normal flex-basis layout, the above solution is not working perfect. Here, I'm trying another similar approach, but results are the same: columns are not perfectly aligned with standard flex layout:
https://codepen.io/stratboy/pen/PoeNPMz
As asked in comments, I'll also add a compiled css version, but I really think you should watch it on codepen since it also have a big screen, that is currently needed to really see what happens:
.main-container {
display: flex;
justify-content: flex-end;
max-width: none;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
.inner-container {
display: flex;
width: calc(50vw + 572.5px);
background-color: #080;
}
.columns {
display: flex;
background-color: rgba(0, 0, 200, 0.5);
gap: 4em;
background-color: #005;
}
.left {
text-align: left;
height: 100px;
background-color: cyan;
width: calc(458px - 2em );
}
.right {
text-align: right;
height: 100px;
width: calc(687px - 2em );
background-color: red;
}
.post-slideshow {
height: 50px;
width: calc(50vw + 114.5px - 2em);
background-color: #ffd736;
}
.main-container2 {
max-width: none;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
background-color: #c3c3c3;
}
.columns2 {
display: flex;
width: 1145px;
gap: 4em;
background-color: #050;
margin: 0 auto;
}
.left2 {
text-align: left;
height: 100px;
background-color: cyan;
flex-basis: 40%;
}
.right2 {
text-align: left;
height: 100px;
background-color: red;
flex-basis: 60%;
}<div class="main-container">
<div class="inner-container">
<div class="columns">
<div class="column left">
left
</div>
<div class="column right">
<div class="post-slideshow">test</div>
</div>
</div><!-- cols -->
</div><!-- inner -->
</div>
<div class="main-container2">
<div class="inner-container2">
<div class="columns2">
<div class="column left2">
left regular flex basis layout
</div>
<div class="column right2">
right regular flex basis layout
</div>
</div><!-- cols -->
</div><!-- inner -->
</div>Just take a look to the cyan columns. For example, the following will risult in something slightly less than flex-basis: 40%
$container-max-width: 1145px;
$gap: 4em;
width: calc(#{$container-max-width / 100 * 40} - #{$gap / 2} );
Anyone could tell why it doesn't work? Essentially, I think it could depend on how browsers calculate rendering of flex-basis elements. I don't know..