div отбирая часть ширины другого div-a сужает его

Question

Я хочу чтобы div class="options" был на следующей строке. Верхние два дива уже суммарно имеют ширину 100% , почему этот div="options" "отбирает" ширину у div class="second-main"?

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>HomeWork</title>
        <meta charset="unt-8">
        <link rel="stylesheet" type="text/css" href="C:\Users\Noname\Рабочий стол\html/HomeWork.css">
    </head>
    <body>
        <div class="container">

            <div class="nav-bar">
                <div class="nav-bar-image">
                    <img class="image" src="C:\Users\Noname\Рабочий стол\html\Картинки/Love.png" alt="Love">
                    <img class="image" src="C:\Users\Noname\Рабочий стол\html\Картинки/Love_is.png" alt="is">
                </div>
            </div>

            <div class="minor-container">

                <div class="main">
                    <p class="main-text">Love is - impressive , magnificient , exciting , fascinating sense.Love is a set of emotions and behaviors characterized by intimacy, passion, and commitment. It involves care, closeness, protectiveness, attraction, affection, and trust. Love can vary in intensity and can change over time. It is associated with a range of positive emotions, including happiness, excitement, life satisfaction, and euphoria, but it can also result in negative emotions such as jealousy and stress.</p>
                </div>

                <div class="second-main">
                    <p class="second-text">How Do You Know?</p>
                </div>

                <div class="options">
                    <p class="option">Get a pleasure</p>
                </div>
            </div>
            
        </div>
    </body>
</html>



html,body {
    position: relative;
    font-family: 'Noto Sans', sans-serif;
    font-size: 3em;
    line-height: 1.4;
    color: #000;
    min-width: 320px;
    overflow-x: hidden;
    height: auto;
    width: 100%;
    padding: 0;
    margin: 0;
}
.image{
    display: flex;
    width: auto;
    min-height: 80px;
    height: 80px;
    margin-right: 30px;
}
.nav-bar-image{
    display: flex;
    float: left;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    opacity: 0.9;
    background: rgba(255, 0, 0, 0.1);
    justify-content: center;
    align-items: center;
}
.minor-container{
    display: flex;
    float: left;
}
.main-text {
    font-size: 25px;
    padding: 10px;
    color:rgba(255, 0, 0, 0.9);
}
.main{
    display: flex;
    width: 65%;
    max-width: 65%;
    min-height: auto;
    border: 2px solid rgba(255, 0, 0, 0.1);
    float: left;
}
.second-main{
    display: flex;
    width: 35%;
    max-width: 35%;
    min-height: auto;
    border: 2px solid rgba(255, 0, 0, 0.1);
    float: left;
}
.second-text {
    font-size: 50px;
    padding: 30px;
    padding-left: 100px;
    color:rgba(255, 0, 0, 0.9);
}
.options {
    float: left;
    width: 33.3%;
    max-width: 33.3%;
    min-height: auto;
    border: 2px solid rgba(255, 0, 0, 0.1);
}
.option{
    font-size: 40px;
}

Answer 1

потому что вы во-1х не разрешили перенос внутри flex-контейнера свойством flex-wrap:wrap, а во-2х, первые 2 блока занимают ширину больше 100% за счет величины бордера. Нужно к ним применить свойство box-sizing:border-box, чтобы рамка не увеличивала размеры блока.

html,
body {
  position: relative;
  font-family: 'Noto Sans', sans-serif;
  font-size: 3em;
  line-height: 1.4;
  color: #000;
  min-width: 320px;
  overflow-x: hidden;
  height: auto;
  width: 100%;
  padding: 0;
  margin: 0;
}

.image {
  display: flex;
  width: auto;
  min-height: 80px;
  height: 80px;
  margin-right: 30px;
}

.nav-bar-image {
  display: flex;
  float: left;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  opacity: 0.9;
  background: rgba(255, 0, 0, 0.1);
  justify-content: center;
  align-items: center;
}

.minor-container {
  display: flex;
  flex-wrap: wrap;
  float: left;
}

.main-text {
  font-size: 25px;
  padding: 10px;
  color: rgba(255, 0, 0, 0.9);
}

.main {
  display: flex;
  width: 65%;
  max-width: 65%;
  min-height: auto;
  border: 2px solid rgba(255, 0, 0, 0.1);
  box-sizing: border-box;
  float: left;
}

.second-main {
  display: flex;
  width: 35%;
  max-width: 35%;
  min-height: auto;
  border: 2px solid rgba(255, 0, 0, 0.1);
  box-sizing: border-box;
  float: left;
}

.second-text {
  font-size: 50px;
  padding: 30px;
  padding-left: 100px;
  color: rgba(255, 0, 0, 0.9);
}

.options {
  float: left;
  width: 33.3%;
  max-width: 33.3%;
  min-height: auto;
  border: 2px solid rgba(255, 0, 0, 0.1);
}

.option {
  font-size: 40px;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <title>HomeWork</title>
  <meta charset="unt-8">
  <link rel="stylesheet" type="text/css" href="C:\Users\Noname\Рабочий стол\html/HomeWork.css">
</head>

<body>
  <div class="container">

    <div class="nav-bar">
      <div class="nav-bar-image">
        <img class="image" src="C:\Users\Noname\Рабочий стол\html\Картинки/Love.png" alt="Love">
        <img class="image" src="C:\Users\Noname\Рабочий стол\html\Картинки/Love_is.png" alt="is">
      </div>
    </div>

    <div class="minor-container">

      <div class="main">
        <p class="main-text">Love is - impressive , magnificient , exciting , fascinating sense.Love is a set of emotions and behaviors characterized by intimacy, passion, and commitment. It involves care, closeness, protectiveness, attraction, affection, and trust. Love
          can vary in intensity and can change over time. It is associated with a range of positive emotions, including happiness, excitement, life satisfaction, and euphoria, but it can also result in negative emotions such as jealousy and stress.</p>
      </div>

      <div class="second-main">
        <p class="second-text">How Do You Know?</p>
      </div>

      <div class="options">
        <p class="option">Get a pleasure</p>
      </div>
    </div>

  </div>
</body>

</html>

БЛОГ НА HUSL

div отбирая часть ширины другого div-a сужает его

Ответы (1 шт):