CSS-L3-031 / Flex 심화

최소 콘텐츠 축소

중급

문제

.row의 너비는 240px입니다. .text가 긴 한 줄을 가진 상황에서 min-width:0과 flex:1을 적용하고 .fixed는 60px을 유지해 넘침을 막으세요.

준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.

확인할 조건

고정 폭
남은 폭
최소 크기 해제

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<div class="row" style="width:240px;display:flex"><div class="text" style="white-space:nowrap;overflow:hidden">아주아주아주아주아주아주아주긴문장</div><div class="fixed">버튼</div></div>
</body>
</html>

목표 화면

힌트

Flex 항목의 기본 최소 크기가 축소를 막을 수 있습니다.

해설·정답 보기

텍스트 항목의 min-width를 풀고 고정 항목의 shrink를 막습니다.

.text{min-width:0;flex:1}.fixed{flex:0 0 60px}

모르는 문법은 코드 사전에서 ↗

style.css화면·구조 확인

풀이 코드

코드는 이 브라우저에 자동 저장돼요.

풀이 결과

코드를 작성하고 채점하기를 눌러보세요.

학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.

← 같은 난이도 목록 다음 문제: 키보드 포커스 표시 →