如何使文本框适合容器但具有最小宽度？

时间：2018-08-24 00:08:43

标签： css css3 flexbox 

.SearchWrap {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
}

.SearchInput {
  margin-bottom: 2px;
  border: 1px solid #b8b8b8;
  padding: 2px 20px 2px 4px;
  min-width: 100px;
  outline: none;
}

.StyledSearchIcon {
  height: .9em;
  position: absolute;
  right: 4px;
  fill: #808080;
  pointer-events: none;
}

.Container {
  background-color: yellow;
  position: absolute;
}
<div class="Container">
  <div class="SearchWrap">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  </div>
  <p>xxxx</p>
</div>

我的<input>渲染为176px宽，但我只希望它为100px宽（最小宽度）。 但是，如果内容更多（xxxx较多），则输入内容的宽度应达到填充容器宽度所需的宽度。

我该怎么做？

我尝试添加width: auto和flex的各种值，但无法使其表现出我想要的方式。

请注意，我不知道.Container的宽度。

1 个答案:

答案 0 :(得分：1)

您可以尝试以下方法：

.Container {
  display: inline-flex;
  flex-direction:column;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  background-color: yellow;
}

.SearchInput {
  margin-bottom: 2px;
  border: 1px solid #b8b8b8;
  padding: 2px 20px 2px 4px;
  width: 100px;
  box-sizing:border-box;
  min-width:100%;
  outline: none;
}

.StyledSearchIcon {
  height: .9em;
  position: absolute;
  right: 4px;
  top:4px;
  fill: #808080;
  pointer-events: none;
}
<div class="Container">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  <p>xxxx</p>
</div>

<div class="Container">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  <p>xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

如果您需要保留初始HTML，则可以执行几乎相同的操作，但是需要向搜索包装中添加width:100%：

.SearchWrap {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  width:100%; /*Don't forget this*/
}

.SearchInput {
  margin-bottom: 2px;
  border: 1px solid #b8b8b8;
  padding: 2px 20px 2px 4px;
  width: 100px;
  min-width:100%;
  box-sizing:border-box;
  outline: none;
}

.StyledSearchIcon {
  height: .9em;
  position: absolute;
  right: 4px;
  fill: #808080;
  pointer-events: none;
}

.Container {
  background-color: yellow;
  display:inline-block;
}
<div class="Container">
  <div class="SearchWrap">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  </div>
  <p>xxxx</p>
</div>

<div class="Container">
  <div class="SearchWrap">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  </div>
  <p>xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

相关问题
最新问题