如何在采用整个容器宽度时使弹性项目收缩更多

Question

原帖如下： 我重现了一个减少的问题： https://codepen.io/MH-123/pen/ExJWQWq?editors=1100 这是代码笔，请阅读下面的问题，它保持不变。我有两个 div，但 Flex Shrink 对它们不起作用，我不知道为什么。

我有一个主弹性容器，其中包含 1 行 2 列。 （每一列也是一个弹性容器，但我认为这并不重要？）。

无论如何，当用户水平缩小屏幕时，我希望左列比右列收缩得更快（这应该使列的项目按比例变小）。

我尝试了很多方法，向列添加 flex-shrink、更改 flex-basis、删除宽度等，但似乎没有任何效果：

https://codepen.io/MH-123/pen/gOymoqM?editors=1100

/* BASE STYLES */
:root {
  --clr-dark: #0f172a;
  --clr-light: #f1f5f9;
  --clr-accent: #e11d48;
}

*,*::before,*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  word-spacing: 1.4px;
  font-family: "Roboto", sans-serif;
  color: var(--clr-dark);
  background-color: var(--clr-light);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  width: 50%;
  height: 650px;
  margin: 0 auto;
  border: 10px solid var(--clr-dark);
}

.item {
  background-color: #fb7185;
  
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

/* END OF BASE STYLES */
.container {
  display: flex;
  flex: row nowrap;
}

.colLeft, .colRight {
  height: 100%;
  border: 5px solid blue;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}
.colLeft {
  flex-grow: 1;
  flex-shrink: 10;
}
.colRight {
  flex-grow: 1;
  flex-shrink 1;
}

.item-1 {
  flex: 0 1 30%;
  width: 95%;
  
  display: flex;
}

.item-a {
  height: 100%;
  width: 50%;
}

.item-b {
  height: 100%;
  width: 50%;
}

.item-2 {
  flex: 0 1 55%;
  width: 95%;
}
.item-3 {
  flex: 0 0 55%;
  width: 95%;;
}
.item-4 {
  flex: 0 0 30%;
  width: 95%;
}

<div class="container">
  <div class="colLeft">
    <div class="item item-1">
      <div class="item item-a">1a</div>
      <div class="item item-b">1b</div>
    </div>
  
    <div class="item item-2">2</div>
  </div>
  <div class="colRight">
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
  </div>
</div>

编辑：这是我的代码笔，我在其中删除了子项的所有宽度 https://codepen.io/MH-123/pen/abxJqZg?editors=0100

Answer 1

¿您是否尝试过使用 display: grid for .container{} 和一些媒体查询来调整列的宽度？

这是一个如何在不同屏幕宽度下使用它的示例。

https://gist.github.com/karolans25/1f2252a19f8c196fcec8083a1bc9ec65

如果这是您需要的，请告诉我