CSS用屏幕更改文本框的大小

Question

我在Reactjs上创建了一个页面。我有两个react组件，它们基本上是简单的div。让我们调用一个LeftPanel，另一个调用Right Panel。 因此，对于左侧面板，我将float设置为左侧，对于右侧面板，我将float设置为右侧，以便这些面板出现在屏幕的各个侧面。 （请参见随附的屏幕截图）。

位于中心的左侧区域，包含文本框和按钮，是具有以下属性的div：

.Area{
display: flex;
min-height: 125px;
align-content: center;
background-color: lightblue;
}

textarea和button具有以下CSS：

.text{
    display: flex;
    width: 55em;
    margin:3% 0% 0% 10%;
    height: 33%;
    font-size: x-large;
    vertical-align: top;
    resize:none;
    border-top-left-radius:30em;
    border-bottom-left-radius:30em;
    border-color:black;
    text-align: center;
    outline: none;
    box-shadow: 0px 5px 0px 0px rgb(51, 46, 46);
}

.searchBtn{
    width:20em;
    height: 38%;
    margin-top:3%;
    margin-right:10%;
    border-top-right-radius: 30em;
    border-bottom-right-radius:30em;
    border-color:black;
    outline:none;
    box-shadow: 0px 4px 0px 0px rgb(51, 46, 46);;
}

现在，我的问题是，当我减小屏幕尺寸时，会发生这种情况：

800px以下：

我该如何解决？ 如有必要，我可以提供任何进一步的信息。

Answer 1

应避免将flex与float结合使用，因为输出行为通常是无法预期的。在下面的示例中，我将flex用于父级.container和所有子级。我假设您希望.leftPanel和.rightPanel定义了min-width，所以我为min-width: 250px;添加了.leftPanel（也可以将其添加到.rightPanel ）。所有孩子的财产flex: 1使他们长大，可以均匀地适应.container，但所有定义的min-width都应得到尊重。

.container {
  display: flex;
  width: 100%;
}

.leftPanel, .rightPanel, .Area {
  display: flex;
  flex: 1;
  border: 1px solid black;
}

.Area{
  display: flex;
  min-height: 125px;
  align-content: center;
  background-color: lightblue;
}

.leftPanel {
  min-width: 250px;
}

<div class="container">
  <div class="leftPanel">
    leftPanel
  </div>
  <div class="Area">
    Area
  </div>
  <div class="rightPanel">
    rightPanel
  </div>
</div>