Css flexbox容器两个div响应

如何使flexbox具有响应性

所以我使用了
flexbox
和两个div，一个用于左侧，一个用于右侧。
屏幕像分裂，左边是图像，右边是信息和输入

但如果
ajax
加载更多数据，则左侧没有响应，图像下方会出现空白

我的HTML：

<div class="forny-container">
    <div class="forny-inner">
        <div class="forny-two-pane">
            <div></div> <!-- form div -->
            <div></div> <!-- image div -->
        </div>
    </div>
</div>

如果
ajax
将更多数据或错误消息加载到表单div中，则图像下方会出现空白：


出什么问题了？
我想这应该能解决你的问题。这里是工作代码


.flex容器{
显示器：flex；
}
.图像选择器{
宽度：50%；
}
.左{
弹性：1；
背景：浅蓝色；
文本对齐：居中；
}
.对{
弹性：1；
背景：浅粉红色；
}
.对h1{
文本对齐：居中；
}
.内容{
左边距：20px；
}

左边
赖特
标题
副标题
一些内容
姓名：
这里有描述，还有一些内容

它不是100%高度。。左侧图像固定高度，比如如果滚动，则左侧图像的大小无关紧要。您想这样做吗？
.fo-container {
    display: block;
    align-items: center;
    height:100%;
}

.fo-inner {
    display: block;
    height: 100%;
    width: 100%;
}

.fo-two-pane {
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
}

.fo-two-pane > div {
    flex: 1;
}

.fo-two-pane > div:first-child {
    display: flex;
    align-items: center;
    background: white;
}

.fo-two-pane > div:last-child {
    background: url('http://getwallpapers.com/wallpaper/full/9/9/0/722477-best-barber-wallpapers-1920x1080-samsung-galaxy.jpg') center center no-repeat
        hsla(31, 80%, 93%, 1);
    display: none;
}