Flex 与最后一行的间隙填充空间

Question

When I use flex with gap, the last row has some space at the end (I think equal in size to gap): https://jsfiddle.net/Lgnzj4ya/

Why doesn't the last row take up all the space like the first one? It does if I remove the gap, but I want the gap between items. My understanding is align-items: stretch (the default) should fill all the space.

Interestingly, I have this problem in JSFiddle and on my website, but not in the Stackoverflow code snippet:

 .flex-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }.flex-item { flex: 1; }

 <div class="flex-container"> <input class="flex-item" type="text" placeholder="First name"> <input class="flex-item" type="text" placeholder="Last name"> <input class="flex-item" type="text" placeholder="Address"> <input class="flex-item" type="text" placeholder="Email"> <input class="flex-item" type="text" placeholder="Phone"> </div>

Image of problem (there is a space after the "Phone" input):

Answer 1

It seems that Lastpass password vault app uses the exact same input placeholder values to trigger placement of its input auto-fill options icon .

It's an SVG and it happens to be max-width: 22px and max-height: 18px

Inserting this in your CSS seems to solve the issue, it will disable the icon, but not the underlying Lastpass functionality:

div[data-lastpass-icon-root] { display: none }

A rather sloppy development solution by Lastpass , as it should in no way have to interfere with the regular flow of a client HTML document.

For the interested, the injected HTML:

<div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;"></div>

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" data-lastpass-icon="true" style="position: absolute; cursor: pointer; height: 18px; max-height: 18px; width: 22px; max-width: 22px; top: -40px; left: -443.667px; z-index: auto; color: rgb(215, 64, 58);"><rect x="0.680176" y="0.763062" width="22.6392" height="22.4737" rx="4" fill="currentColor"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M19.7935 7.9516C19.7935 7.64414 20.0427 7.3949 20.3502 7.3949C20.6576 7.3949 20.9069 7.64414 20.9069 7.9516V16.0487C20.9069 16.3562 20.6576 16.6054 20.3502 16.6054C20.0427 16.6054 19.7935 16.3562 19.7935 16.0487V7.9516Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.76288 13.6577C5.68525 13.6577 6.43298 12.9154 6.43298 11.9998C6.43298 11.0842 5.68525 10.3419 4.76288 10.3419C3.8405 10.3419 3.09277 11.0842 3.09277 11.9998C3.09277 12.9154 3.8405 13.6577 4.76288 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3298 13.6577C11.2521 13.6577 11.9999 12.9154 11.9999 11.9998C11.9999 11.0842 11.2521 10.3419 10.3298 10.3419C9.4074 10.3419 8.65967 11.0842 8.65967 11.9998C8.65967 12.9154 9.4074 13.6577 10.3298 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8964 13.6577C16.8188 13.6577 17.5665 12.9154 17.5665 11.9998C17.5665 11.0842 16.8188 10.3419 15.8964 10.3419C14.974 10.3419 14.2263 11.0842 14.2263 11.9998C14.2263 12.9154 14.974 13.6577 15.8964 13.6577Z" fill="white"></path></svg>