Question

在Chrome 43之前，div1将占据容器高度的10％，无论其子尺寸如何，div1都会溢出。从Chrome 43开始，div1不再追求灵活增长，而是增长到它的儿童尺寸。这应该是这样的吗？如何让div1溢出并遵循其flex-grow属性。谢谢！

继承人：http://jsfiddle.net/HorseFace/xsbmmf4o/

webView.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                if (url.startsWith("tel:")) {
                    initiateCall(url);
                    return true;
                }
                if (url.startsWith("mailto:")) {
                    sendEmail(url.substring(7));
                    return true;
                }

                return false;
            }

private void sendEmail(String add) {
         Intent i = new Intent(Intent.ACTION_SEND);
         i.setType("text/plain");
         i.putExtra(Intent.EXTRA_EMAIL, new String[] { add });
          try {
         startActivity(Intent.createChooser(i, "Send mail..."));
         } catch (android.content.ActivityNotFoundException ex) {
         Toast.makeText(WebViewActivity.this,
         "There are no email clients installed.", Toast.LENGTH_SHORT)
         .show();
         }

        }

Answer 1

你误解了flex-grow。它设置flex grow factor，

确定当分配正空闲空间时，flex item相对于Flex容器中其余flex items的增长量。省略时，它设置为1。

因此只分发可用空间空间。如果您希望Flex项目占用灵活容器的10％，则应将flex-basis设置为0：

弹性基础[是] main size的初始flex item，在分配自由空间之前。

请注意，您可以使用简写flex property同时设置flex-grow和flex-basis（以及flex-shrink）：

flex: 0.1; /*
  flex-grow: 0.1;
  flex-shrink: 1;
  flex-basis: 0;
*/

另请注意，Flexbox规范将min-height和min-width的初始值更改为auto（之前为0）。这可能会破坏您的百分比，因此请使用与overflow不同的visible，或设置min-height: 0。

＆＃13;

body {
  color: purple;
  background-color: #d8da3d
}
#container {
  height: 500px;
  display: flex;
  flex-direction: column;
}
#div1, #div2 {
  min-height: 0; /* Or `overflow: hidden` */
}
#div1 {
  background: red;
  flex: 0.1;
}
#inner1 {
  height: 200px;
  background: lightcoral;
}
#div2 {
  background: blue;
  flex: 0.9;
  overflow: auto;
}
#inner2 {
  height: 200px;
  background: #ccccff;
}

＆＃13;

<div id="container">
  <div id="div1">
    <div id="inner1">Inner1</div>
  </div>
  <div id="div2">
    <div id="inner2">Inner2</div>
  </div>
</div>

＆＃13;

Chrome 43 Flexbox flex-grow问题

1 个答案: