表单错误破坏了内联字段的布局

Question

我有下面的布局，问题是如果其中一个字段错误不存在，布局就会中断，即使一个字段有error-wrapper div 布局也不应该改变输入字段的最小高度，并且错误会展露无遗

要查看问题，您可以评论一个具有 error-wrapper 类的 div

.parent-container {
  display: flex;
  align-items: center;
}

label {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  display: inline-block;
  font-size: 0.75rem;
  line-height: 20px;
  padding-bottom: 4px;
  vertical-align: middle;
  opacity: 1;
}

.select-container-wrapper {
  position: relative;
  box-sizing: border-box;
  width: 175px;
}

.input-container-wrapper {
 display: flex;
 align-items: center;
}

.error-wrapper {
    align-items: flex-start;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    display: flex;
}

<div class="parent-container">
  <div class="select-container">
    <div>
      <label>Option</label>
      <div class="select-container-wrapper">
        <select>
          <option value="1">Test</option>
        </select>
      </div>
       <div class="error-wrapper">
         Error Occured
      </div>
    </div>
  </div>
  <div class="input-container">
    <div>
      <label>Number</label>
      <div class="input-container-wrapper">
        <input />
        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="css-14z50xn-InventoryWidget" height="1.25rem" width="1.25rem" xmlns="http://www.w3.org/2000/svg"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
        </svg>
      </div>
      <!-- If i comment this line the layout breaks -->
       <div class="error-wrapper">
         Error Occured
      </div>
      <!--till here -->
    </div>
  </div>
</div>

Answer 1

您没有为任何组件设置最小高度。并且您的父容器设置为居中对齐。

要么从 .parent-container 中删除它

align-items: center;

或者为包裹的div设置一个最小高度

.select-container > div, .input-container>div{min-height:80px}

然后，当您删除错误包装器时，元素看起来没有变化。