CSS-添加子级后，Flex div的宽度大于100％

问题描述

我一直在尝试解决这个问题，但是没有运气。我有一个设置为100％宽度的div，然后使用一些JavaScript来制作flex子级。

整个容器是一个条形图...而子代是条形图。

父div的宽度设置为100％，但是添加的子项过多时，其宽度超过100％。我希望它可以滚动以查看其他栏...但是溢出：滚动也不起作用。

任何帮助将不胜感激！

父div的id =“ barChartContent”，每个bar子项都是id ='barChild'...

    import React,{ useState,useEffect } from 'react'
import { Input } from 'reactstrap'

export default function CompChart(props) {
  const [ selectedCourse,setSelectedCourse ] = useState();
  const { customerCourses,students,setSelectedGroup } = props;
  const [ groupList,setGroupList ] = useState([])
  const [ groupListTotals,setGroupListTotals ] = useState([]);
  const [ totalStudents,setTotalStudents ] = useState(0)


  const createStudentGroupsList = () => {
    let groups = new Set();
    students.forEach(stud =>  groups.add(stud.group))
    setGroupList([...groups])
  }

  useEffect(() => {
      createStudentGroupsList()
  },[students])

  const calculatePercentage = () => {
    //Calc total students in this course. 
    let totalStudentsInCourse = 0
    students.forEach(stud => {
      if(stud.courses.includes(selectedCourse._id)){
        totalStudentsInCourse += 1
      }
    })

    //Calc total passed and failed
    groupList.forEach(group => {
      let totalPassed = 0
      let totalFailed = 0
      let totalStudentsInGroup = 0

      students.forEach(stud => {
        //If student is part of the course and part of the correct group....
        if(stud.courses.includes(selectedCourse._id) && stud.group === group){
          totalStudentsInGroup += 1
          //Look through their grades...
          stud.grades.forEach(grade => {
            if(grade.course === selectedCourse._id){
              grade.grade > 0.7 ? totalPassed += 1 : totalFailed += 1
            }
          })
        }
      })
    let addedTotals = {
      groupName: group,passed: totalPassed,failed: totalFailed,inProgress: totalStudentsInGroup - (totalFailed + totalPassed),groupTotal: totalStudentsInGroup,percentFailed: totalFailed / totalStudentsInGroup * 100,percentPassed: totalPassed / totalStudentsInGroup * 100,percentInProgress: (totalStudentsInGroup - (totalFailed + totalPassed)) / totalStudentsInGroup * 100
    }

    setTotalStudents(totalStudentsInCourse)
    //Save total passed and failed to state. 
      setGroupListTotals(gs => [...gs.filter(g => g.groupName !== addedTotals.groupname),addedTotals])
    })
  }

  useEffect(() => {
    selectedCourse && calculatePercentage()
  },[selectedCourse])

  return (
    <div className=' d-flex justify-content-center align-items-center w-100 h-100' style={{
    }}>
      <div 
      className='d-flex flex-column align-items-center justify-content-between m-3 w-100 p-3'
      style={{
        backgroundColor: 'white',borderRadius: '10px',height: '500px'
      }}>
        <Input 
          type='select' className='w-50' style={{
              backgroundColor: 'rgb(4,109,199,0.24)',border: 'none',color: 'black',textAlign: 'center'
          }}
          onChange={(e) => {
              if(e.target.value !== ''){
                console.log(customerCourses)
                let newCourse = customerCourses.filter(c => c._id === e.target.value)[0]
                console.log(newCourse)
                setSelectedCourse(newCourse)  
              }else if(e.target.value === ''){
                setSelectedCourse()  
              }
          }}>
              <option value=''>Choose Course</option>
              {customerCourses.map(course => { 
                  return <option key={course._id} value={course._id}>{course.courseTitle}</option>
              })}
          </Input>
          <div id="barChartContent" className='d-flex flex-row w-100 h-100 m-3' style={{

          }}>
            {selectedCourse ? groupList.map(group => {
              if(selectedCourse.reccomendedGroup.includes(group)){
              return <div id="barChild" key={group} className='d-flex flex-column m-2 text-center h-100 justify-content-start'>
                <div className='d-flex flex-column justify-content-center h-100'
                onMouseEnter={() => {
                  setSelectedGroup(groupListTotals.length > 0 && groupListTotals.filter(t => t.groupName === group)[0]);
                }}
                onMouseLeave={() => {
                  setSelectedGroup();
                }}
                style={{
                  boxShadow: '0 10px 6px -6px #777',}}
                >
                  <div style={{
                    backgroundColor: '#5bc0de',height: `${groupListTotals.length > 0 && groupListTotals.filter(t => t.groupName === group)[0].percentInProgress}%`
                  }}/>
                  <div style={{
                    backgroundColor: '#DB8B8B',height: `${groupListTotals.length > 0 && groupListTotals.filter(t => t.groupName === group)[0].percentFailed}%`
                  }}/>
                  <div style={{
                    backgroundColor: '#82B793',height: `${groupListTotals.length > 0 && groupListTotals.filter(t => t.groupName === group)[0].percentPassed}%`
                  }}/>
                </div>
                <span 
                className='m-2'
                style={{
                  height: '10%',}}>{group} </span>
                </div>
              }
            }) : <div className='align-self-center text-center w-100'>Please select a class.</div>}
          </div>
      </div>
    </div>
  )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）