文本不适合移动设备上的flexbox

Question

在片段上看起来很不错，但是当我在浏览器上执行此操作时，它根本不起作用。当您将浏览器窗口的大小调整为500px或以下时，中间和右侧行中的文本超出了我的容器div，即使容器div的高度为100％，我也不是确定为什么高度没有增加，以便适合中间和右边的文字＆＃39;行。下面是图像，但请注意文本在整个容器之外。最后一件事是我无法理解为什么图像在不同的行上，即使左边的弹性基础是100％。两张图片都应该在左侧，并不意味着它们在同一行？我知道他们的图像很大，但我只是制作了80像素，我遇到了同样的问题。它好像媒体查询不起作用。我最终是在拥有三行的移动版本之后。第一行有两张图片，最后两行只是文字，而我正在寻找中间列的高度是其他列的两倍，这就是为什么我让它变得灵活增长2。 / p>

＆＃13;

＆＃13;

java -cp UI.jar;UI_lib\LeapJava.jar -Djava.library.path="UI_lib\x64" your.package.name.YourMainClass

＆＃13;

* {
    margin: 0;
}

html,
body {
    height: 100%;
    background-color: green;
}



#bigwrap {
    position: relative;
    height: 100%;
}

.container {
    display: flex;
    //position: absolute;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    height: 70%;
    width: 70%;
    margin: auto;
   // top: 40%;
    //left: 50%;
   // transform: translate(-50%, -50%);  /* http://stackoverflow.com/q/36817249/3597276 */
    background-color: white;
}

.left, .middle, .right{
    border-right: 1px solid blue;
}







.left {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;
    order: 1;
    //background: red;
    flex: 1 20%;
    height: 100%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
   // background: green;
    flex: 2 20%;
    height: 100%;
}

.right {
    text-align: center;
    order: 3;
    //background: yellow;
    flex: 1 20%;
    height: 100%;
}

.right .headbox{
    border-bottom: 1px solid orange;
    margin: auto;
    width: 60%;
    height: auto;
}

.right .list{
    text-align: center;
    margin: auto;
    width: 60%;
    height: auto;
}

.list ul{
    list-style: none;
    padding: 0;
}

.list a{
    text-decoration: none;
    color: inherit;
}

.headbox h3{
    color: orange;
}


/*
@media screen and (min-width: 600px) {
    .container {
        flex-wrap: nowrap;
    }
    .left {
        flex-basis: 20%;
        flex-grow: 1;
        order: 1;
    }
    .middle {
        flex-basis: 20%;
        flex-grow: 2;
        order: 2;
    }
    .right {
        flex-basis: 20%;
        flex-grow: 1;
        order: 3;
    }
}

*/

@media all and (max-width: 500px) {

  .container {
    flex-flow: row wrap;
    height: 100%;
    
  }
  .left img {

    height: 80px;
    width: 80px;

  }

  .left, .right, .middle {
    flex: 1 100%;
  }

}

＆＃13;

＆＃13;

＆＃13;