Change select width to fit div container

Question

I have defined a dropdwon as fellow:

    <div class="form-group">
        <select class="form-control">
            <option>small option</option>
            <option>mediummmmmmmmmmmmmmmmmmmm option</option>                
            <option>large eeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeee eeee option</option>
        </select>
    </div>

I want to change select width to be minimum of container width and option text width. If option text is bigger than div container, truncate option's text and put ellipsis at the end. So the option stays inside the container. Also select must be responsive, When resizing window, select width should be updated to fit new window width.

How can I achieve that using bootstrap CSS?

Answer 1

try width:100%;

It works for me each element in ListView