.container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ddd;
}

.row {
    display: flex;
    width: 100%;
}

/*
 關於 flex: 1 1 0 的說明：
第一個值 (flex-grow: 1)：元素會平均分配剩餘空間
第二個值 (flex-shrink: 1)：元素會在空間不足時等比例縮小
第三個值 (flex-basis: 0)：元素的基準寬度為 0，這樣可以確保完全平均分配
*/
.header, .content {
    flex: 1 1 0; 
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding: 8px;
    text-align: left;
    overflow-wrap: break-word;
    min-width: 0;
}

.header {
    background-color: #4682b4;
    color: white;
    font-weight: bold;
}

/* 寬度控制類別 */
.w-10 {
    flex: 0 0 10% !important;
}

.w-15 {
    flex: 0 0 15% !important;
}

.w-20 {
    flex: 0 0 20% !important;
}

.w-25 {
    flex: 0 0 25% !important;
}

.w-30 {
    flex: 0 0 30% !important;
}

.w-33 {
    flex: 0 0 33.333333% !important;
}

.w-35 {
    flex: 0 0 35% !important;
}

.w-40 {
    flex: 0 0 40% !important;
}

.w-45 {
    flex: 0 0 45% !important;
}

.w-50 {
    flex: 0 0 50% !important;
}

.w-55 {
    flex: 0 0 55% !important;
}

.w-60 {
    flex: 0 0 60% !important;
}

.w-65 {
    flex: 0 0 65% !important;
}

.w-70 {
    flex: 0 0 70% !important;
}

.w-75 {
    flex: 0 0 75% !important;
}

.w-80 {
    flex: 0 0 80% !important;
}

.w-85 {
    flex: 0 0 85% !important;
}

.w-90 {
    flex: 0 0 90% !important;
}

.w-95 {
    flex: 0 0 95% !important;
}

.w-100 {
    flex: 0 0 100% !important;
}