Блог

Главная - Вопросы по программированию - Выгиб строки из окна

Выгиб строки из окна

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я сделал 2 строки столбца с помощью flex. левый столбец — это список элементов без сжатия. правый столбец представляет собой диаграмму шириной до конца окна. Я стараюсь, чтобы ширина диаграммы составляла 100%, базовая на 100%, ничего не помогало, выводите диаграмму из окон и добавляйте прокрутку.

 <div class="frow">
        <div class="list">
            <div>
                <input type="checkbox" id="jack" value="1"/>
                <label for="jack">item 1</label>
            </div>
        </div>
        <div class="chart" ref="chartDiv"></div>
</div>

.frow{
  display: flex;
  flex-direction: row;
}
.list{
    flex-shrink: 0;
}
.chart {
    height: 500px;
    width: 100%;
}

введите описание изображения здесь

Если я попытаюсь создать без flex с отображением: встроенный блок для столбцов и ширины диаграммы на 100%, все будет работать без проблем

Комментарии:

1. Попробуйте установить фиксированную ширину в вашем элементе frow

2. я не знаю ширину, знаю только, что правый столбец должен быть в конце вашего монитора

3. сгибать-увеличивать: 1 вместо ширины: 100%

4. добавьте flex-grow:1 to .chart и удалите ширину, ничего не меняйте

5. минимальная ширина: 0 для построения диаграммы, затем ,

Ответ №1:

Попробуйте установить max-width:100vw; и flex:1; на диаграмме;

 .frow{
  display: flex;
  flex-direction: row;
  max-width:100vw;
  overflow-x:hidden;
}
.list{
    flex-shrink: 0;
}
.chart {
    height: 500px;
    flex:1;
}

Ответ №2:

 .frow{
  display: flex;
  flex-direction: row;
}
.list{
    flex-shrink: 0;
}
.chart {
    height: 500px;
    flex-basis: 100%;
}

Добавьте a flex-basis:100%; в свой .chart и удалите max-width:100% из .chart

Метки: