css - 当flexbox旁边的div的宽度增加时，如何避免flexbox中的元素不从div中出来？

Question

当 flexbox 旁边的 div 的宽度增加时，我希望 flexbox 中的元素不会从 flexbox 中出来。

假设我有一个 flexbox 容器，其中包含 svg、输入字段和带有简单文本的 div 等元素。在这个 flexbox 容器旁边，我有一个侧面板。这个侧面板可以调整大小..这意味着当用户向侧面拖动侧面板时，它的宽度会增加或减少。这样做时，flexbox 容器缩小了，因此 flexbox 中的元素从它里面出来了……我该如何避免呢？我如何确保即使拖动侧面板时 flexbox 元素也应保持完整？

.wrapper {
    display: flex;
    flex-grow: 1;
}

.items_container {
    position: relative;
    width: 40px;
    height: 40px;
    top: 16px;
    margin-left: 16px;
    padding-left: 5px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;}}

  .items_container.expanded .search_input_field {
      display: flex;
      align-items: center;
   }

<div class="wrapper">
    <div class="items_container expanded">
        <div class="search_input_field">

        <Svgsearch/><input type=text/>
        </div>
    </div>
    <div>dropdown to be added</div>
</div>

有人可以帮我吗？谢谢。

Answer 1

如果元素大于其容器，您可以使用 flex-wrap 使元素下降到另一行:

display: flex;
flex-wrap: wrap;

文档:https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

如果您希望元素保持在一行上，那么我会给它们指定百分比宽度。