flexbox容器两个divs响应

Question

如何使响应式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>

我的CSS：

.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;
}

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

出了什么问题？

Answer 1

我想这应该可以解决您的问题。这是工作代码。

.flex-container {
  display: flex;
}

.image-selector {
  width: 50%;
}

.left {
  flex: 1;
  background: lightblue;
  text-align: center;
}

.right {
  flex: 1;
  background: lightpink;
}

.right h1 {
  text-align: center;
}

.content {
  margin-left: 20px;
}

<div class="flex-container">
  <div class="left">
      <h1>Left</h1>
      <img class="image-selector" src="https://agentpekka.com/wp-content/uploads/2018/11/AP_MVM_Apple_2x-640x854.jpg" alt="image">
  </div>

  <div class="right">
    <h1>Right</h1>
    <div class="content">
      <h2>Heading</h2>
      <h3>Subheading</h3>
      <h4>Somecontent</h4>
      <lable>Name:</lable>
      <input type="text" placeholder="name">
      <p>description goes here, some more content</p>
    </div>
  </div>

</div>

Click for Codepen link

此外，您将需要使用媒体查询来处理不同的屏幕尺寸和不同的查看端口。