diff --git a/packages/frontend/src/components/grid/MkDataCell.vue b/packages/frontend/src/components/grid/MkDataCell.vue
index fa7674a03b..e3fac0408a 100644
--- a/packages/frontend/src/components/grid/MkDataCell.vue
+++ b/packages/frontend/src/components/grid/MkDataCell.vue
@@ -89,7 +89,7 @@ const needsContentCentering = computed(() => {
 watch(() => [cell, cell.value.value], () => {
 	// 中身がセットされた直後はサイズが分からないので、次のタイミングで更新する
 	nextTick(emitContentSizeChanged);
-});
+}, { immediate: true });
 watch(() => cell.value.selected, () => {
 	if (cell.value.selected) {
 		rootEl.value?.focus();
diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue
index e04df0d4ce..292898e465 100644
--- a/packages/frontend/src/components/grid/MkGrid.vue
+++ b/packages/frontend/src/components/grid/MkGrid.vue
@@ -462,6 +462,9 @@ function onChangeCellValue(sender: GridCell, newValue: CellValue) {
 
 function onChangeCellContentSize(sender: GridCell, contentSize: Size) {
 	cells.value[sender.address.row][sender.address.col].contentSize = contentSize;
+	if (sender.column.setting.width === 'auto') {
+		largestCellWidth(sender.column);
+	}
 }
 
 function onHeaderCellWidthBeginChange() {
@@ -496,6 +499,9 @@ function onHeaderCellChangeContentSize(sender: GridColumn, newSize: Size) {
 	switch (state.value) {
 		case 'normal': {
 			columns.value[sender.index].contentSize = newSize;
+			if (sender.setting.width === 'auto') {
+				largestCellWidth(sender);
+			}
 			break;
 		}
 	}
@@ -504,24 +510,30 @@ function onHeaderCellChangeContentSize(sender: GridColumn, newSize: Size) {
 function onHeaderCellWidthLargest(sender: GridColumn) {
 	switch (state.value) {
 		case 'normal': {
-			const column = columns.value[sender.index];
-			const _cells = cells.value;
-			const largestColumnWidth = columns.value.reduce(
-				(acc, value) => Math.max(acc, value.contentSize.width),
-				columns.value[sender.index].contentSize.width,
-			);
-			const largestCellWidth = _cells
-				.map(row => row[column.index])
-				.reduce(
-					(acc, value) => Math.max(acc, value.contentSize.width),
-					_cells[0][column.index].contentSize.width,
-				);
-			column.width = `${Math.max(largestColumnWidth, largestCellWidth)}px`;
+			largestCellWidth(sender);
 			break;
 		}
 	}
 }
 
+function largestCellWidth(column: GridColumn) {
+	const _cells = cells.value;
+	const largestColumnWidth = columns.value[column.index].contentSize.width;
+
+	const largestCellWidth = (_cells.length > 0)
+	  ? _cells
+			.map(row => row[column.index])
+			.reduce(
+				(acc, value) => Math.max(acc, value.contentSize.width),
+				0,
+			)
+		: 0;
+
+	console.log(`largestCellWidth: ${largestColumnWidth}, ${largestCellWidth}`);
+
+	column.width = `${Math.max(largestColumnWidth, largestCellWidth)}px`;
+}
+
 function setCellValue(sender: GridCell | CellAddress, newValue: CellValue) {
 	const cellAddress = 'address' in sender ? sender.address : sender;
 	const cell = cells.value[cellAddress.row][cellAddress.col];
diff --git a/packages/frontend/src/components/grid/MkHeaderCell.vue b/packages/frontend/src/components/grid/MkHeaderCell.vue
index 79729e9dbf..ca92422891 100644
--- a/packages/frontend/src/components/grid/MkHeaderCell.vue
+++ b/packages/frontend/src/components/grid/MkHeaderCell.vue
@@ -2,7 +2,7 @@
 <th
 	ref="rootEl"
 	:class="$style.cell"
-	:style="[{ width: column.width }]"
+	:style="[{ maxWidth: column.width, minWidth: column.width, width: column.width }]"
 >
 	<div :class="$style.root">
 		<div :class="$style.left"/>
@@ -52,7 +52,7 @@ const text = computed(() => {
 watch(column, () => {
 	// 中身がセットされた直後はサイズが分からないので、次のタイミングで更新する
 	nextTick(updateContentSize);
-});
+}, { immediate: true });
 
 function onHandleDoubleClick(ev: MouseEvent) {
 	switch (ev.type) {