73 replies

Flex-item not shrinking and causing overflow

Hello, I'm working on a simple UI for utility tool and I need bit a help with css, basically I got a div that lists all files inside a scripts folder, however the span item (so the file name) just doesn't shrink causing the whole container to overflow

Like this
https://mentally-insane.pixeluted.com/BOXe6/PELotUxU44.png

I'm using svelte for this project, so this is the code for the div

<script lang="ts">
  import FileExplorerFolderEntry from "./FileExplorerFolderEntry.svelte";
  import FileExplorerFileEntry from "./FileExplorerFileEntry.svelte";
  import Dropdown from "../Dropdown.svelte";
  import type { FileData } from "../../managers/FileExplorerManager";
  import FileExplorerManager from "../../managers/FileExplorerManager";

  let currentFiles: FileData[];
  FileExplorerManager.currentFiles.subscribe((value) => {
    currentFiles = value;
  });
</script>

<div class="file-explorer">
    <FileExplorerFolderEntry name="Auto Exec" icon="fa-solid fa-robot">
        {#each currentFiles as file}
            {#if file.folder === "Auto Exec"}
                <FileExplorerFileEntry fileName={file.title} fileId={file.id} />
            {/if}
        {/each}
    </FileExplorerFolderEntry>

    {#each currentFiles as file}
        {#if file.folder === "Scripts"}
            <FileExplorerFileEntry fileName={file.title} fileId={file.id} />
        {/if}
    {/each}

    <Dropdown>
        <button data-index="1">
            <i class="fa-solid fa-file"></i>
            <span>New File</span>
        </button>
    </Dropdown>
</div>

<style>
    .file-explorer {
        background-color: var(--light);
        border: 1px solid var(--lighter);
        border-radius: 2.5px;
        box-sizing: border-box;
        user-select: none;
        overflow: auto;
        height: 100%;

        display: flex;
        flex-direction: column;
        gap: 1px;
        padding-top: 5px;
        padding-left: 5px;
    }
</style>

<script lang="ts">
  import FileExplorerFolderEntry from "./FileExplorerFolderEntry.svelte";
  import FileExplorerFileEntry from "./FileExplorerFileEntry.svelte";
  import Dropdown from "../Dropdown.svelte";
  import type { FileData } from "../../managers/FileExplorerManager";
  import FileExplorerManager from "../../managers/FileExplorerManager";

  let currentFiles: FileData[];
  FileExplorerManager.currentFiles.subscribe((value) => {
    currentFiles = value;
  });
</script>

<div class="file-explorer">
    <FileExplorerFolderEntry name="Auto Exec" icon="fa-solid fa-robot">
        {#each currentFiles as file}
            {#if file.folder === "Auto Exec"}
                <FileExplorerFileEntry fileName={file.title} fileId={file.id} />
            {/if}
        {/each}
    </FileExplorerFolderEntry>

    {#each currentFiles as file}
        {#if file.folder === "Scripts"}
            <FileExplorerFileEntry fileName={file.title} fileId={file.id} />
        {/if}
    {/each}

    <Dropdown>
        <button data-index="1">
            <i class="fa-solid fa-file"></i>
            <span>New File</span>
        </button>
    </Dropdown>
</div>

<style>
    .file-explorer {
        background-color: var(--light);
        border: 1px solid var(--lighter);
        border-radius: 2.5px;
        box-sizing: border-box;
        user-select: none;
        overflow: auto;
        height: 100%;

        display: flex;
        flex-direction: column;
        gap: 1px;
        padding-top: 5px;
        padding-left: 5px;
    }
</style>

<script lang="ts">
  import FileExplorerFolderEntry from "./FileExplorerFolderEntry.svelte";
  import FileExplorerFileEntry from "./FileExplorerFileEntry.svelte";
  import Dropdown from "../Dropdown.svelte";
  import type { FileData } from "../../managers/FileExplorerManager";
  import FileExplorerManager from "../../managers/FileExplorerManager";

  let currentFiles: FileData[];
  FileExplorerManager.currentFiles.subscribe((value) => {
    currentFiles = value;
  });
</script>

<div class="file-explorer">
    <FileExplorerFolderEntry name="Auto Exec" icon="fa-solid fa-robot">
        {#each currentFiles as file}
            {#if file.folder === "Auto Exec"}
                <FileExplorerFileEntry fileName={file.title} fileId={file.id} />
            {/if}
        {/each}
    </FileExplorerFolderEntry>

    {#each currentFiles as file}
        {#if file.folder === "Scripts"}
            <FileExplorerFileEntry fileName={file.title} fileId={file.id} />
        {/if}
    {/each}

    <Dropdown>
        <button data-index="1">
            <i class="fa-solid fa-file"></i>
            <span>New File</span>
        </button>
    </Dropdown>
</div>

<style>
    .file-explorer {
        background-color: var(--light);
        border: 1px solid var(--lighter);
        border-radius: 2.5px;
        box-sizing: border-box;
        user-select: none;
        overflow: auto;
        height: 100%;

        display: flex;
        flex-direction: column;
        gap: 1px;
        padding-top: 5px;
        padding-left: 5px;
    }
</style>

<script lang="ts">
  import FileExplorerFolderEntry from "./FileExplorerFolderEntry.svelte";
  import FileExplorerFileEntry from "./FileExplorerFileEntry.svelte";
  import Dropdown from "../Dropdown.svelte";
  import type { FileData } from "../../managers/FileExplorerManager";
  import FileExplorerManager from "../../managers/FileExplorerManager";

  let currentFiles: FileData[];
  FileExplorerManager.currentFiles.subscribe((value) => {
    currentFiles = value;
  });
</script>

<div class="file-explorer">
    <FileExplorerFolderEntry name="Auto Exec" icon="fa-solid fa-robot">
        {#each currentFiles as file}
            {#if file.folder === "Auto Exec"}
                <FileExplorerFileEntry fileName={file.title} fileId={file.id} />
            {/if}
        {/each}
    </FileExplorerFolderEntry>

    {#each currentFiles as file}
        {#if file.folder === "Scripts"}
            <FileExplorerFileEntry fileName={file.title} fileId={file.id} />
        {/if}
    {/each}

    <Dropdown>
        <button data-index="1">
            <i class="fa-solid fa-file"></i>
            <span>New File</span>
        </button>
    </Dropdown>
</div>

<style>
    .file-explorer {
        background-color: var(--light);
        border: 1px solid var(--lighter);
        border-radius: 2.5px;
        box-sizing: border-box;
        user-select: none;
        overflow: auto;
        height: 100%;

        display: flex;
        flex-direction: column;
        gap: 1px;
        padding-top: 5px;
        padding-left: 5px;
    }
</style>

I don't know what code you need, but feel free to ask for more code and I will send it.

Also the main container is not overflowing https://mentally-insane.pixeluted.com/BOXe6/HaRiYaSa84.png
Just the container that contains the search button and the list of files (this overflow didnt start until I started implementing the files)
https://mentally-insane.pixeluted.com/BOXe6/HAjAjEhe20.png

Thanks for any help!

Flex-item not shrinking and causing overflow

Similar Threads

Similar Threads

Similar Threads