我面临的问题是，我希望我的卡片容器扩展到屏幕结束。
https://i.stack.imgur.com/f6vp0.png
注意结尾处的空白。 是位置使然:相对； 右:16px；
我怎样才能告诉我的flex box容器包括我已经使用的right属性，同时收缩容器以适应屏幕。
我知道这里面肯定有一些javascript黑客。 然而，我希望有一个更简单的解决办法。 如果有可能的话。
下面是我的全部代码:
*{
box-sizing: border-box;
}
html body {
margin: 0px;
padding: 0px;
}
.CardHead {
display: flex;
width: 304px;
height: 304px;
font-size: 100%;
flex: 0 0 auto;
background-color:black;
}
.Card {
position: relative;
width: 304px;
height: 304px;
background-color: red;
color: white;
font-size: 1rem;
padding: 1rem 1rem;
flex: 0 0 auto;
}
.Cards {
display: flex;
overflow: auto;
flex: 0 1 auto;
position: relative;
right: 16px;
z-index: -1;
}
.Carousel {
display: flex;
} <!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body>
<div class="Carousel">
<div class="CardHead"></div>
<div class="Cards">
<div class="Card" style="background-color: yellow;"></div>
<div class="Card" style="background-color: green;"></div>
<div class="Card" style="background-color: purple;"></div>
<div class="Card" style="background-color: orange;"></div>
</div>
</div>
</body>
</html>null
如果我的问题或代码不清楚，我很抱歉。
将右替换为边距-右
null
* {
box-sizing: border-box;
}
html body {
margin: 0px;
padding: 0px;
}
.CardHead {
display: flex;
width: 304px;
height: 304px;
font-size: 100%;
flex: 0 0 auto;
background-color: black;
}
.Card {
position: relative;
width: 304px;
height: 304px;
background-color: red;
color: white;
font-size: 1rem;
padding: 1rem 1rem;
flex: 0 0 auto;
}
.Cards {
display: flex;
overflow: auto;
flex: 0 1 auto;
position: relative;
margin-right: 16px;
z-index: -1;
}
.Carousel {
display: flex;
}<div class="Carousel">
<div class="CardHead"></div>
<div class="Cards">
<div class="Card" style="background-color: yellow;"></div>
<div class="Card" style="background-color: green;"></div>
<div class="Card" style="background-color: purple;"></div>
<div class="Card" style="background-color: orange;"></div>
</div>
</div>