How to stretch the last CSS flex item all the way to the right edge of the view port?-CodePudding

I'm trying to clone the "editor's picks" of this page

This is the very selector I want to clone: document.querySelector('.article-collection-teases__teases--layout-3-asymmetric .tz-article-collection--wide')

It uses this calc(((100vw - 1224px)/ 2) 601px); as it's width.

I'm assuming the 601px is not hard-coded

I'm trying to replicate it here

.editors-picks{
  width: 900px;
  background:blue;
  margin: auto
}
.articles{
  display: flex;
}
.articles  div{
  min-width: 23.52941%;
  margin-right: 1.96078%;
  min-height: 40px;
  background:red; 
}

.articles .big{
  width: calc(((100vw - 900px)/ 2)   401px);
  background: green;
  flex-shrink: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div >
<h3>Editor's Picks</h3>
<div >
  <div>d</div>
  <div>d</div>
  <div >ddd</div>
</div>
</div>
</body>
</html>

I'm sure if I start adding a few more pixels to 401px I can get the effect but is there a logic behind the calculation? Why does 601px give them the effect it does

CodePudding user response：

Use negative margin-right like below

.editors-picks {
  max-width: 900px;
  background: blue;
  margin: auto
}

.articles {
  display: flex;
}

.articles div {
  min-width: 23.52941%;
  margin-right: 1.96078%;
  min-height: 40px;
  background: red;
}

.articles .big {
  /* if (screen width < 900px)
       margin-right= 0px
     else
       negative margin to cover the right side
  */
  margin-right: min(0px,(900px - 100vw)/ 2);
  background: green;
  flex-grow: 1; /* don't forget this */
}

<div >
  <h3>Editor's Picks</h3>
  <div >
    <div>d</div>
    <div>d</div>
    <div >ddd</div>
  </div>
</div>

CodePudding user response：

There is logic behind the calculation. And the calculation actual changes per breakpoints

@media screen and (min-width: 600px) {
  width: calc(49.01961%   25px   1px);
}

@media screen and (min-width: 800px) {
  width: calc(49.01961%   60px   1px);
}

@media screen and (min-width: 1070px) {
  width: calc(49.01961%   80px   1px);
}

@media screen and (min-width: 1384px) {
  width: calc(((100vw - 1224px)/ 2)   601px);
}

To focus on the calculation in your question, for screen sizes larger than 1384px, we want to calculate the remaining space on the side of the screen to fill.

100vw - 1224px (the width of the centered container) = The remaining width of the browser viewport, then we divde that by 2 to get the width of just one side of the remanining space. And the 601px is the size of remaining space inside the container which is calculated by 1224px - 2 cards width and margins.

(287.992   23.992) * 2 = 623.968px (width of 2 cards)
1124px - 623.968px = ~600px (remaining width in container)

And then obviously the other breakpoints follow the same strategy.

For your code in the example, your container is 900px, and your 2 rigid columns are 211.76px wide with an additional 17.641px right margin. So the additional space you need to add for that breakpoint is

900 - ((211.76   17.641) * 2) = 441.198

CodePudding user response：

Just need to use flex-grow: 1

.editors-picks {
  width: 900px;
  background: blue;
  margin: auto
}

.articles {
  display: flex;
}

.articles div {
  min-width: 23.52941%;
  margin-right: 1.96078%;
  min-height: 40px;
  background: red;
}

.articles .big {
  background: green;
  flex-grow: 1;
}

<div >
  <h3>Editor's Picks</h3>
  <div >
    <div>d</div>
    <div>d</div>
    <div >ddd</div>
  </div>
</div>