Flexbox max-width 100%

Asked

Viewed 986 times

0

I’m studying about flexbox and I tried to put together a structure with flex layout to which I have a container that fills my entire page, inside this container I have two elements, a sidebar positioned to the left with 100% height and fixed width and I also have a content to which will be responsible for containing the content of my page, however one of my contents will be a notification area (notification) that will have fixed height more width of 100% of my content and within that area I will have several cards that will contain the messages themselves.

The problem is that my notification is extrapolating the width of my content even though I set the max-width for it.

Code in the Codepen

body {
  height: 100%;
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  background: red;
  display: flex;
}

.sidebar {
  display: flex;
  background: blue;
  width: 100px;
  height: 100%;
}

.content {
  background: yellow;
  display: flex;
  padding: 15px;
  margin: 15px;
  flex: 1;
}

.notification {
  display: flex;
  background: gray;
  overflow-x: auto;
  width: 100%;
  height: 250px;
  max-width: 100%;
  padding: 10px;
  align-items: center;
  /* Se eu coloco da forma abaixo funciona */
  /* max-width: 100px; */
  /* min-width: 100%; */
}

.card {
  height: 200px;
  min-height: 200px;
  min-width: 200px;
  width: 200px;
  background: green;
  margin-left: 10px;
}
<div id="root">
  <div class="container">
    <div class="sidebar"></div>
    <div class="content">
      <div class="notification">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
      </div>
    </div>
  </div>
</div>

html css flexbox

  • Take a look at how inspect the page elements. And about flex-box has this guide that I use a lot.

  • Dude I didn’t quite understand the problem, you have an image of how the layout has to look?

  • So @hugocsl I need to create an area that will show my cards to each other, and when these cards fill my entire area of my notification I need you to create a horizontal scroll bar to display all my items. Kind of expected result

1 answer

0

You can add the property flex-wrap: wrap in class notification:

.notification {
  flex-wrap: wrap;
  display: flex;
  background: gray;
  overflow-x: auto;
  width: 100%;
  height: 250px;
  max-width: 100%;
  padding: 10px;
  align-items: center;  
}

The flex-wrap serves to indicate how items will be displayed within the element.

When defining the flex-wrap as wrap we are saying that the items will be grouped in several lines, from top to bottom.

When you do not indicate how to wrap, the items will be made available in a single continuous row (by default). So the cards were making their content "stretch" and ignore the property width: 100% of notification.

  • Thanks Rafael for your reply, more so what I need is that mine cards stand next to each other, and when the cards fill the entire width of my class notification i need you to create a horizontal scroll bar and not break line.

Browser other questions tagged html css flexbox

You are not signed in. Login or sign up in order to post.