Prevent select HTML element from overflowing parent width

Question

I have a parent container with fixed length. It has two children: span and select. There's a problem that select overflows parent when option name is very long.

I would like the select to not grow past parent width.

Here's a codepen: https://codepen.io/dostu/pen/eYrPKjZ

EDIT: The select options are dynamic in my case. When they are short I would like to keep the select's original width and not fill the parent 100%.

.container {
  display: flex;
  align-items: center;
  width: 150px;
  height: 50px;
  background-color: #ddd;
}

<div class="container">
  <span>Style</span>
  <select>
    <option>Very very very long option</option>
  </select>
</div>

Does this answer your question? [Why don't flex items shrink past content size?](https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size) — Henry Woody, Oct 08 '22 at 17:54
Short answer though is that putting `width: 100%` on the `select` will handle it. — Henry Woody, Oct 08 '22 at 17:55
Thanks for the suggestion. In my case the content of select is dynamic. When it's short I would like to keep the select small and not grow to fill parent width. — dostu, Oct 08 '22 at 18:03

Henry Woody · Accepted Answer · 2022-10-08T18:41:16.967

You can do this by adding a container around the <select> element with a min-width of 0 and then setting the max-width on the <select> to 100%.

The min-width: 0 on the container overrides the default min width for flex items and allows the container to shrink past the content size, as described in: Why don't flex items shrink past content size?.

The max-width: 100% on the <select> element prevents it from overflowing its container.

Here's an example (with both long and short option values):

.container {
  display: flex;
  align-items: center;
  width: 150px;
  height: 50px;
  background-color: #ddd;
}

.select-wrapper {
  min-width: 0;
}

select {
  max-width: 100%;
}

<div class="container">
  <span>Style</span>
  <div class="select-wrapper">
    <select>
      <option>Very very very long option</option>
    </select>
  </div>
</div>

<div class="container">
  <span>Style</span>
  <div class="select-wrapper">
    <select>
      <option>Opt</option>
    </select>
  </div>
</div>

score -1 · Answer 2 · answered Oct 08 '22 at 17:58

You can hide the overflow of the parent element, any element bigger than the parent element won't be visible past the parent size. You can as well set a max-width for the child element, so it doesn't go larger than the parent element.

I edited your codepen:

HTML

<div class="container">
    <span>Style</span>
    <select class="option">
        <option>Very very very long option</option>
    </select>
</div>

CSS

.container {
    display: flex;
    align-items: center;
    width: 150px;
    height: 50px;
    background-color: #ddd;
    overflow: hidden;
}

.option {
    max-width: 100px;
}

This causes the arrows of select element to get clipped. I would like them to still be visible. BTW it's not me who downvoted you :) — dostu, Oct 08 '22 at 18:07

Prevent select HTML element from overflowing parent width

2 Answers2