CSS:在flexbox中调整大小时缩放项目

Question

我现在正在努力解决这个问题,所以我希望有人可以提供帮助.

例如:

<section class="example-a"> 
    <ol>
        <li class="spacer"></li>
        <li class="cell">A</li>
        <li class="cell">B</li>
        ....
        <li class="spacer"></li>
   </ol>
</section>

如果我调整.example-a40%,我希望每个li缩小40%.这意味着,如果它.spacer是大小的两倍,.cell那么在调整大小时它将保持该比率.查看section本次DEMO中的第一个.如果你调整大小,你会看到从一开始每个元素都缩小或增长.

它表现得像我想要的那样,除了我想以不同的方式想象它; 的ol需要被可视化为基.结帐第二section的演示.但无论我做什么,当我调整大小时,首先.spacer元素会缩小ol.

有什么建议我可以解决这个问题或者解决它吗？

main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.example-a, 
.example-b {
    display: flex; 
    border: 2px solid blue;
    align-items: center;
    justify-content: center;
    
    ol {
         list-style-type: none;
         display: flex;
         align-items: center;
         margin: 0;
         padding: 0;
         width: 100%;
       
       .cell {
             border: 1px solid #000;
             width: 100px;
             height: 100px;
             
            
               //display: flex;
               align-items: center;
               justify-content: center;
             
         }
     }
       
    
     .spacer {
            display: inline-block;
            width: 200px;
            height: 20px;
            background-color: green;
            
            &:first-child {
              width: 400px;
            }
        }
}

.example-b {
  ol {
    background-color: lightgrey;
    padding: 10px;
    border-radius: 10px;
    max-width: 400px;
  }
}

section + section {
  margin-top: 20px;
}

<main>
<section class="example-a"> 
    <ol>
        <li class="spacer"></li>
        <li class="cell">A</li>
        <li class="cell">B</li>
        <li class="cell">D</li>
        <li class="cell">D</li>
        <li class="spacer"></li>
    </ol>
</section>

<section class="example-b">
    <span class="spacer"></span>  
    <ol>
        <li class="cell"><span>A</span></li>
        <li class="cell"><span>B</span></li>
        <li class="cell"><span>C</span></li>
        <li class="cell"><span>D</span></li>
    </ol>
    <span class="spacer"></span>  
</section>
</main>

更新:虽然大多数答案都很有用并且在某种程度上解决了这个问题,但我选择的答案对我的具体案例帮助最大.

Answer 1

这很简单:你只需要<ol>在第二个例子中声明一个显式宽度.<ol>当视口比屏幕上可以安装的更窄时,这将强制嵌套缩小:

.example-b {
  ol {
    background-color: lightgrey;
    padding: 10px;
    border-radius: 10px;
    max-width: 400px;
    width: 40%;  /* Added this rule */
  }
}

请在此处查看更新的小提琴:https://jsfiddle.net/teddyrised/tjtp5403/17/