CSS Study Notes

An overflow occurred while setting the width of the input box:

<div class="tags-input">
  <el-tag
      class="tag-item"
      v-for="(tag, index) in list"
      :key="tag.id"
      closable
      size="mini"
      @close="closeTag(index)">
      {{tag.name}}
  </el-tag>
  <div class="query-input">
    <input type="text"/>
    </div>
</div>

<style lang="stylus">
.tags-input
  width 200px
  background #42b983
  display flex
  align-items center
  flex-wrap wrap
  border 1px solid blue
  .tag-item
    margin 1px 0 1px 3px
  .query-input
    flex 1
    input
      width 100%
</style>
Copy the code

Box-sizing: border-box

<style lang="stylus">
.tags-input
  width 200px
  background #42b983
  display flex
  align-items center
  flex-wrap wrap
  border 1px solid blue
  .tag-item
    margin 1px 0 1px 3px
  .query-input
    flex 1
    input
      box-sizing border-box
      width 100%

</style>
Copy the code