时间戳

首页 > 解决方案 > CSS div not listening to my max-width attribute

html - CSS div not listening to my max-width attribute

问题描述

EDIT: I think my code is fine. It was just the skew that made it a bit stretched out haha. Sorry

I normally would say my CSS skills are above average but this is seriously making me rethink that...

.our-work-container {
    background: red;
    display: flex;
    flex-flow: column nowrap;
    transform: skew(-12deg);
    width: 100%;
    margin: 0 auto;
}

.our-work-container .header-section {
    display: flex;
    flex-flow: row nowrap;
    height: 260px;
}

.our-work-container .header-section .brand-square {
    width: 350px;
    min-width: 350px;
    max-width: 350px;
    background: yellow;
}

.our-work-container .header-section .header-text {
    padding-left: 60px;
    text-align: left;
    color: white;
    transform: skew(12deg);
}

.our-work-container .header-section .header-text h1 { 
    font-weight: 900;
    font-size: 4em;
}

.our-work-container .header-section .header-text h2 {
    font-family: Lora,serif!important;
    font-size: 1.2em;
    font-weight: 400;
}
<div class="our-work-container">
      <div class="header-section">
        <div class="brand-square"></div>
        <div class="header-text">
          <h1>Our Work</h1>
          <div class="brand-line-break"></div>
          <h2>Marketing is our passion, each project we take on is in collaboration with each of our team members, ensuring high quality marketing experiences.</h2>
        </div>
      </div>
      <div class="projects"></div>
    </div>

The colors are placeholders but can you guys tell me the reasoning why my yellow square(.brand-square) isnt listening to the max width attributes. When I inspect the element, I don't see anything that is messing with the styles.

My guess would be somehow flexbox is altering those values but I cant seem to figure out what.

Would really appreciate the insight. Thank you!

标签： htmlcssflexbox

解决方案

只需删除width:350px内部 .our-work-container .header-section .brand-square类

在这里找到工作小提琴

http://jsfiddle.net/15xLs49j/2/

但作为建议，给出静态高度并不是一个好习惯，因为您的内容必须是响应式的，而 css 中的静态值会破坏响应性。

推荐阅读