2021-01-25 Width Auto vs Width 100

Playground

by Ttt Yyy

HTML

<!DOCTYPE html> 
<html>
<head />
<body>
  <div class='container'>
   <p class='autoWidth'>
    Hi this is width auto. Hi this is width auto Hi this is width auto.
   </p>
   <p class='oneHundred'>
    Hi this 100% width. Hi this 100% width. Hi this 100% width. Hi this 100% width.
   </p>
   <img src='http://placehold.it/100x75' />
  </div>
</body>
</html>

CSS

.container {
  display: flex;
  flex-direction: column;
  width: 150px;
  border: 1px solid red;
}

.autoWidth {
  border: 1px solid gray;
  width: auto;
  padding: 50px;
}

.oneHundred {
  border: 1px solid gray;
  width: 100%;
  padding: 50px;
}