html - 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-a 的大小调整 40%，我希望每个 li 都缩小 40%。这意味着如果 .spacer 是 .cell 的两倍大，它会在调整大小时保持该比例。查看此 DEMO 中的第一个部分 .如果您调整大小，您会看到每个元素从一开始就缩小或增大。

它的行为如我所愿，只是我想以不同的方式形象化它； ol 需要可视化为一个组。检查 demo 中的第二个部分 .但无论我做什么，当我调整大小时，首先是 .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>当视口(viewport)比屏幕上适合的窄时收缩:

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

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