javascript - 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);;
}

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

800 像素以下:

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

Answer 1

您应该避免将 flex 与 float 结合使用，因为输出行为通常是不可预料的。在下面的示例中，我为父级 .container 和所有子级使用了 flex。我假设您希望 .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>