Задать вопрос
@makaleks
css

Как заполнить оставшуюся ширину элементом ввода, но без обёртки?

Деляю менюшку, наполнил ряд кнопками, между которыми расположил <select>, которым хочу заполнить оставшуюся ширину. Использую на родительском элементеdisplay: table; width: 100%;, на дочерних - display:table-cell;width:fit-content;, конкретно на <select> - width: 100%.

Проблема в том, что width: 100% на <div> (когда ставил эксперименты) заполняет оставшуюся ширину, но когда этот трюк попытался применить к <select> - элемент стал заполнять вообще всё, вытесняя остальное. Почему так происходит, и какими css-правилами добиться, чтобы ширина <select> вела себя нормально?

Есть хак - обернуть в , но мне это не подходит, потому что меню генерируется процедурно - а выделять во что-то отдельное - разводить мусор в проекте

Код с <div>, проблемой и хаком под спойлером

<!DOCTYPE html>
<html lang="ru" style="height:100%;">
<head>
    <meta charset="utf-8">
    <title>Полигон</title>
    <!--
    <link href="stypes.css" rel="stylesheet">
    <script src="script.js"></script>
    -->
    <!--<script type="module" src="/static/vue.js"></script>-->
<style>
</style>
</head>
<body style="height:100%;margin:0;">
    <div>My fixed content</div>
    <div>
        <div style="width:fit-content;float:left;background-color:lightgray;"
            >setraw
        </div>
        <div
            style="float:left;max-width:100%;background-color:lightyellow"
            >Select-remaining
        </div>
        <div
            style="width:fit-content;float:left;background-color:lightblue"
            >vsplit
        </div>
    </div>
    <div style="display:table;width:100%;">
        <div style="display:table-cell;width:fit-content;background-color:lightgray;"
            >setraw
        </div>
        <div
            style="display:table-cell;width:100%;background-color:lightyellow"
            >Select-remaining many1 many2 many3 many4 many5 many6 many7 many8
        </div>
        <div
            style="display:table-cell;width:fit-content;background-color:lightblue"
            >vsplit
        </div>
    </div>

    <div style="display:table;width:100%;">
        <button style="display:table-cell;width:fit-content;background-color:lightgray;"
            >setraw
        </button>
        <select
            style="display:table-cell;width:100%;background-color:lightyellow"
        >
                <optgroup>
                    <option>Select-remaining</option>
                    <option>many1</option>
                    <option>many2</option>
                    <option>many3</option>
                </optgroup>
        </select>
        <button
            style="display:table-cell;width:fit-content;background-color:lightblue"
            >vsplit
        </button>
    </div>

    <div style="display:table;width:100%;">
        <button style="display:table-cell;width:fit-content;background-color:lightgray;"
            >setraw
        </button>
        <span
            style="display:table-cell;width:100%;background-color:lightyellow"
            >
            <select style="width:100%">
                <optgroup>
                    <option>Select-remaining</option>
                    <option>many1</option>
                    <option>many2</option>
                    <option>many3</option>
                </optgroup>
        </select>
        </span>
        <button
            style="display:table-cell;width:fit-content;background-color:lightblue"
            >vsplit
        </button>
    </div>

</body>
<script>
</script>
</html>

  • Вопрос задан
  • 64 просмотра
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
@makaleks Автор вопроса
IvanU7n в комментарии подсказал, что flex умеет всё, что нужно, и на рендеринге это похоже на правду. Там есть те же fill-content и flex-grow:1 (вместо width: 100%), просто в отличие от table-cell это работает даже на <select>

Ответ

<!DOCTYPE html>
<html lang="ru" style="height:100%;">
<head>
    <meta charset="utf-8">
    <title>Полигон</title>
    <!--
    <link href="stypes.css" rel="stylesheet">
    <script src="script.js"></script>
    -->
    <!--<script type="module" src="/static/vue.js"></script>-->
<style>
</style>
</head>
<body style="height:100%;margin:0;">
    <div style="display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;">
        <button style="flex:0 1 fit-content;background-color:lightgray;"
            >setraw
        </button>
        <select
            style="flex-grow:1;background-color:lightyellow"
        >
                <optgroup>
                    <option>Select-remaining</option>
                    <option>many1</option>
                    <option>many2</option>
                    <option>many3</option>
                </optgroup>
        </select>
        <button
            style="flex:0 1 fit-content;background-color:lightblue"
            >vsplit
        </button>
    </div>
</body>
<script>
</script>
</html>

Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Написание статей в нужном стиле ( интерьер, дизайн спальни )
22 нояб. 2024, в 13:52
2000 руб./за проект
Необходимо доработать расширение для Google Chrome
22 нояб. 2024, в 13:51
5000 руб./за проект
Сделать на Python страницу с результатами теста
22 нояб. 2024, в 13:44
10000 руб./за проект
Ещё заказы