弹性框 - 经纱时溢出的问题 [英] Flex box - overflow issue when warp

查看：316 发布时间：2017/12/17 20:54:26 html css overflow flexbox wrap

本文介绍了弹性框 - 经纱时溢出的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我们有两个弹性框 boxOrange 和<$ c $ c> boxPurpule ，它们共享一个容器的全部宽度，并伸展到这个容器的高度。由于它们的 min-width 400px ，所以这些弹性框在小屏幕的列 1）。

如果其中一个框包含太多的内容，则该框是可滚动的（如 boxOrange 演示例2）。

问题是当它们是小屏幕上的可滚动内容时。我希望 boxOrange 保留 50％高度的容器当它翘曲。正如你在例2中看到的那样， boxOrange 的内容不可滚动，并且溢出了容器你知道如何解决这个问题吗？

例1 - 在codepen.io上可用

 #container {background-color：red;填充：10px;宽度：80％;身高：300px;显示：flex; flex-wrap：wrap; align-items：stretch;}＃boxOrange {background-color：orange; flex：1; min-width：400px; overflow：scroll;}＃boxPurple {background-color：purple; flex：1; min-width：400px;}   
 < div id =容器> < div id =boxOrange> < / DIV> < div id =boxPurple> < / div>< / div>

在codepen.io上可用

 
 
  #container {background-color：red;填充：10px;宽度：80％;身高：300px;显示：flex; flex-wrap：wrap; align-items：stretch;}＃boxOrange {background-color：orange; flex：1; min-width：400px; overflow：scroll;}＃boxPurple {background-color：purple; flex：1; min-width：400px;}  
 
 < div id =容器> < div id =boxOrange>内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - CONTENT  - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - CONTENT  - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 -  CONTE内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容< / div> < div id =boxPurple> < / div>< / div>

解决方案 如果您给 boxOrange  a  max-height：50％成长
         class =snippet-code-css lang-css prettyprint-override>  #container {background-color：red;填充：10px;宽度：80％;身高：300px;显示：flex; flex-wrap：wrap; align-items：stretch;}＃boxOrange {background-color：orange; flex：1; min-width：400px; overflow：auto;}＃boxPurple {background-color：purple; flex：1; min-width：400px;} @ media screen和（max-width：1050px）{#boxOrange {max-height：50％; } #boxPurple {height：50％; }}   
 < div id = container> < div id =boxOrange>内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - CONTENT  - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 -  CONTEN内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - 内容 - ENT  - 内容 - 内容< / div> < div id =boxPurple> < / div>< / div>

Let's me try to explain the issue.



Assume we have 2 flex box boxOrange and boxPurpule who share the full width of a container and stretch to the height of this one. Due to their min-width of 400px, these flex box warp in 'column' on small screen (demonstration in Exemple 1).

If one of the box contain too much content, the box is scrollable (like boxOrange in the demonstration of Exemple 2).

The issue is when their is scrollable content on small screen. I would like the boxOrange keep 50% height of container when it warp. As you can see in Exemple 2, the content of boxOrange, isn't scrollable and overflow the container.

Do you know how to fix that ?

Exemple 1  - Available on codepen.io



#container {
  background-color: red;
  padding: 10px;
  width: 80%;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#boxOrange {
  background-color: orange;
  flex: 1;
  min-width: 400px;
  overflow: scroll;
}
#boxPurple {
  background-color: purple;
  flex: 1;
  min-width: 400px;
}

<div id=container>

  <div id="boxOrange">

  </div>

  <div id="boxPurple">
  </div>

</div>





Exemple 2  - Available on codepen.io



#container {
  background-color: red;
  padding: 10px;
  width: 80%;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#boxOrange {
  background-color: orange;
  flex: 1;
  min-width: 400px;
  overflow: scroll;
}
#boxPurple {
  background-color: purple;
  flex: 1;
  min-width: 400px;
}

<div id=container>
  <div id="boxOrange">
    CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
  </div>

  <div id="boxPurple">
  </div>
</div>



 解决方案 
If you give the boxOrange a max-height: 50% it will scroll instead of grow



#container {
  background-color: red;
  padding: 10px;
  width: 80%;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#boxOrange {
  background-color: orange;
  flex: 1;
  min-width: 400px;
  overflow: auto;
}
#boxPurple {
  background-color: purple;
  flex: 1;
  min-width: 400px;
}

@media screen and (max-width: 1050px) {
  #boxOrange {
    max-height: 50%;
  }
  #boxPurple {
    height: 50%;
  }
}

<div id=container>
  <div id="boxOrange">
   CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
  </div>

  <div id="boxPurple">
  </div>
</div>





                        这篇关于弹性框 - 经纱时溢出的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

弹性框 - 经纱时溢出的问题 [英] Flex box - overflow issue when warp

问题描述

例1 - 在codepen.io上可用

Exemple 1 - Available on codepen.io

Exemple 2 - Available on codepen.io

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

弹性框 - 经纱时溢出的问题 [英] Flex box - overflow issue when warp

问题描述

例1 - 在codepen.io上可用

Exemple 1 - Available on codepen.io

Exemple 2 - Available on codepen.io

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭