'Flexbox + text-overflow ellipsis won't work if nested within undefined width container

Take a look at the snippet below. Having .filepicker as a direct descendant of body works as expected when shrinking window size. Here's Tailwind Play snippet.

<div class="filepicker mb-14">
  <div class="bg-gray-100 p-6 flex items-center">
    <div class="whitespace-nowrap overflow-ellipsis overflow-hidden mr-6 flex-1">
        8674484_ic_fluent_checkbox_checked_regular_icon.png
    </div>
    <div class="cursor-pointer w-8 h-8">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">...</svg>
    </div>
  </div>
</div>

But if put within a container (several layers deep) with undefined width .filepicker won't shrink anymore:

<form class="block mb-14">
  <fieldset class="block">
    <div class="form-control">
      <div class="filepicker">
        <div class="bg-gray-100 p-6 flex items-center">
          <div class="whitespace-nowrap overflow-ellipsis overflow-hidden mr-6 flex-1">
              8674484_ic_fluent_checkbox_checked_regular_icon.png
          </div>
          <div class="cursor-pointer w-8 h-8">
            <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
              ...
            </svg>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
</form>

How to make .filepicker shrink even when it's nested?

htmlcssflexboxtailwind-css


Solution 1:[1]

The problem was related to using a <fieldset>. Switching to div/section resolved the issue. I updated the sandbox code. I would appreciate if you can tell whether it's a bug / expected behavior.

<form class="block mb-14">
  <section class="block">
    <div class="form-control">
      <div class="filepicker">
        <div class="bg-gray-100 p-6 flex items-center">
          <div class="whitespace-nowrap overflow-ellipsis overflow-hidden mr-6 flex-1">8674484_ic_fluent_checkbox_checked_regular_icon.png</div>
          <div class="cursor-pointer w-8 h-8">
            <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
              <path d="M64,0a64,64,0,1,0,64,64A64.07,64.07,0,0,0,64,0Zm0,122a58,58,0,1,1,58-58A58.07,58.07,0,0,1,64,122Z"></path>
              <path d="M92.12,35.79a3,3,0,0,0-4.24,0L64,59.75l-23.87-24A3,3,0,0,0,35.88,40L59.76,64,35.88,88a3,3,0,0,0,4.25,4.24L64,68.25l23.88,24A3,3,0,0,0,92.13,88L68.24,64,92.13,40A3,3,0,0,0,92.12,35.79Z"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </section>
</form>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 lexeme

Related Questions