[문제 해결]자식 요소에 flex 비율을 지정해도 부모 요소의 100% 채워지지 않는 문제

기존 문제

 

위 그림처럼 부모(연두색) 안 자식요소들(주황색, 파란색)의 flex 비율을 지정해도 부모 요소의 100% 채워지지 않는 문제가 생겼고 html 중 form 태그 때문인 것을 깨달았다.

 

문제 해결 후

 

 

 

기존 코드

<div class="bottom">
      <form @submit.prevent="createPost">
        <div class="bottom-top">
          <div contenteditable="true" class="custom-textarea" ref="editableDiv" :placeholder="placeholderText"
            @input="updateContent" :disabled="!isLoggedIn">
          </div>
        </div>
        
        <div class="bottom-bottom">
          <div class="image-button">
            <img src="/imgs/image_32.png" style="width: 20px; height: 20px;" alt="이미지업로드" @click="openFileUpload"
              :disabled="!isLoggedIn">
            <!-- 실제 파일 입력 요소 (숨김 처리) -->
            <input type="file" ref="fileInput" style="display: none;" @change="handleImageUpload" accept="image/*">
          </div>

          <button class="up-button" @click="setUp" :disabled="!isLoggedIn">
            ↑상승
          </button>
          <button class="down-button" @click="setDown" :disabled="!isLoggedIn">
            ↓하락
          </button>
          <button type="submit" class="post-button" :disabled="!isLoggedIn">
            등록
          </button>
        </div>
      </form>
    </div>

 

 

 

 

수정 코드

<div class="bottom">
      <div class="bottom-top">
        <div contenteditable="true" class="custom-textarea" ref="editableDiv" :placeholder="placeholderText"
          @input="updateContent" :disabled="!isLoggedIn">
        </div>
      </div>

      <div class="bottom-bottom">
        <div class="image-button">
          <img src="/imgs/image_32.png" style="width: 20px; height: 20px;" alt="이미지업로드" @click="openFileUpload"
            :disabled="!isLoggedIn">
          <!-- 실제 파일 입력 요소 (숨김 처리) -->
          <input type="file" ref="fileInput" style="display: none;" @change="handleImageUpload" accept="image/*">
        </div>

        <button class="up-button" @click="setUp" :disabled="!isLoggedIn">
          ↑상승
        </button>
        <button class="down-button" @click="setDown" :disabled="!isLoggedIn">
          ↓하락
        </button>
        <button type="submit" class="post-button" :disabled="!isLoggedIn">
          등록
        </button>
      </div>
    </div>

 

 

 

부모 요소 css (연두색 부분)

.bottom {
  flex: 1.4;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  position: sticky;
  padding: 10px;
  background-color: #4cc571;
  box-sizing: border-box;
  border-radius: 20px;
}

 

 

자식요소1 css (주황색 부분)

.bottom-top {
  flex : 3; 
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 13px;
  background-color: #6e7230;
  border-radius: 20px;
}

 

 

자식요소2 css(파란색 부분)

.bottom-bottom {
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 5px 0px 5px 0px;
  background-color: #448dbe;
  /* #686868 */
  box-sizing: border-box;
  justify-content: space-between;
}