[CSS] Flex 남은 곳 꽉 채우기

flex에서 남은 공간을 꽉 채우는 방법

위와 같은 이미지에서 왼쪽의 아이템이 차지하는 영역 외의 모든 부분을 우측의 "할일을 입력하세요"가 꽉 채우도록 해야 했다.

최종 코드는 하단에 첨부하고, 차근차근 봐야되는 부분만 꺼내오겠다.

<Wrapper>
      <GroupSelect
        selectedGroupId={selectedGroupId}
        setSelectedGroupId={setSelectedGroupId}
      />
      <Form onSubmit={sumbitHandler}>
        <Input
          type="text"
          name="todoInput"
          placeholder="할일을 입력하세요"
          ref={todoInputRef}
          autoComplete="off"
        />
      </Form>
    </Wrapper>

위와 같은 코드에서 GroupSelect 컴포넌트의 크기는 고정되어 있는 상황이었다. 따라서 Form 요소에게 남은 공간만큼 쫙 늘어나도록 해야 했다.

flex : 1 0 auto; / flex-grow: 1;

이럴 때 사용할 수 있는 속성이 flex : 1 0 auto; 나 flex-grow: 1; 이다.

따라서 form 태그에 flex-grow: 1;를 적용해주고 input 태그에 width: 100%;를 적용해주고 나면 다음과 같이 화면 UI가 변경된다.

줄어들면 줄어드는대로 남은 공간에 form 태그가 꽉 찬다!

실제 코드

import { useState, useRef } from "react";
import { useRecoilValue, useSetRecoilState } from "recoil";
import { selectedDateState, toDosState } from "../../models/atoms";
import ToDo from "../../models/todo";
import { styled } from "styled-components";
import GroupSelect from "./GroupSelect";

function NewToDo() {
  const [selectedGroupId, setSelectedGroupId] = useState<number>(0);
  const todoInputRef = useRef<HTMLInputElement>(null);
  const setTodosState = useSetRecoilState(toDosState);
  const selectedDate = useRecoilValue(selectedDateState);

  const sumbitHandler = (event: React.FormEvent) => {
    event.preventDefault();
    const enteredText = todoInputRef.current!.value;

    if (enteredText.trim().length === 0) {
      // Throw an error
      return;
    }
    const newTodo = new ToDo(
      enteredText,
      selectedGroupId,
      selectedDate,
      selectedDate,
      false
    );
    setTodosState((prev) => prev.concat(newTodo));

    todoInputRef.current!.value = "";
  };

  return (
    <Wrapper>
      <GroupSelect
        selectedGroupId={selectedGroupId}
        setSelectedGroupId={setSelectedGroupId}
      />
      <Form onSubmit={sumbitHandler}>
        <Input
          type="text"
          name="todoInput"
          placeholder="할일을 입력하세요"
          ref={todoInputRef}
          autoComplete="off"
        />
      </Form>
    </Wrapper>
  );
}

export default NewToDo;

const Wrapper = styled.div`
  display: flex;
  padding: 10px 0;
`;

const Form = styled.form`
  flex-grow: 1;
`;

const Input = styled.input`
  width: 100%;
  border: none;
  padding: 8px;
  font-size: 12px;
  border-radius: 4px;
  &:focus {
    outline: none;
    background-color: #00000012;
  }
`;